parse json data into select box

[Trinath JV]

{
    "one":{
        "a":{
          "option a":"option1, option1.1, option1.2"
          
        },
        "b":{
          "option b":"option2, option2.1, option2.2"
          
        },
        "c":"option3"
    },
    "two":{
        "d":{
          "option d":"option3, option3.1, option3.2"
          
        },
        "e":"option4"
    },
    "three":{
     "f":{
       "optionf":"option5,option5.1" } 
    }
}

here is the json data and this has to segregate into 4 different select box(sb) and one is dependent on another

sb1 - should have options = None,one,two,three

if option one is selected in sb1 then sb2 shuld display and show options =None, a,b,c

if option a is selected in sb2 then sb3 should display with options = None, optiona

if option a is selected in sb3 then sb4 should display with options = None, option1,option1.1,option1.2

any help

[Jan Cernocky]

Hi Trinath,

do you still have the code I helped you with earlier? Can you paste it here? It seems a lot of posts are missing after the community upgrade.

Basically when you get to the last level you would do something like this

var choices = 'option1, option1.1, option1.2';
var choicesArr = choices.split(', ');
for (var i = 0; i < choicesArr.length; i++) {
    gs.info(choicesArr[i]);
    //g_form.addOption();
}

[Trinath JV]

Hi @Jan Cernocky, thanks for response. Yes i too see the code is missing

var options = {
   "one":{
      "a":"option1",
      "b":"option2"
   },
   "two":{
      "d":"option3",
      "e":"option4"
   }
}

var dataString = JSON.stringify(options);
var dataJson = JSON.parse(dataString);

for (var i in dataJson) {
    gs.info("i- "+i);
}

var myType = 'one';

for (var j in dataJson[myType]) {
    gs.info("j- "+j);
}

var myName = 'a';

gs.info("a- "+dataJson.one.a);

and i has piece of code that was drafted and here is the one 

[Jan Cernocky · Accepted solution]

Here is the adjusted code

var options = {
    "one":{
        "a":{
          "option a":"option1, option1.1, option1.2"
          
        },
        "b":{
          "option b":"option2, option2.1, option2.2"
          
        },
        "c":"option3"
    },
    "two":{
        "d":{
          "option d":"option3, option3.1, option3.2"
          
        },
        "e":"option4"
    },
    "three":{
     "f":{
       "optionf":"option5,option5.1" } 
    }
}


var dataString = JSON.stringify(options);
var dataJson = JSON.parse(dataString);

// going through first level
for (var i in dataJson) {   
    // here you would put g_form.addOption() instead of gs.info that I use just to test in background script 
    gs.info("i- "+i);
}

// lets say user selected type as ONE so setting this for script, normally it would be g_form.getValue()
var myType = 'one';

// going through second level
for (var j in dataJson[myType]) {
    // here you would put g_form.addOption() instead of gs.info that I use just to test in background script 
    gs.info("j- "+j);
}

// lets say user selected name as A so setting this for script, normally it would be g_form.getValue()
var myName = 'a';

// checking what is in there, this is still an object, just a test row for background script
gs.info("a- "+dataJson[myType][myName]);

var choices = "";
// going through thrird level
for (var k in dataJson[myType][myName]) {
    // here you would put g_form.addOption() instead of gs.info that I use just to test in background script 
    gs.info("k- "+k);
    choices = k;
}

// now we have the final level name in 'k' but the value itself is a string: option1, option1.1, option1.2
gs.info('choices- ' + dataJson[myType][myName][choices]);

// split string to get array (you split by comma or comma+space depending on what data you have there)
var choicesArr = dataJson[myType][myName][choices].split(', ');
for (var l = 0; l < choicesArr.length; l++) {
    gs.info('choice- ' + choicesArr[l]);
    //g_form.addOption();
}

[Mahendra RC]

Hello @Trinath JV 

So if you are implementing this on the form level than you need to write 3 onChange client script on your sb1, sb2 and sb3 variable:

if you are getting the Json response from some server side script then you need to get this data in all 3 client script. You can use something like below code in your client scripts:

Client script for sb1:

var options = {
	"one": {
		"a": {
			"option a": "option1, option1.1, option1.2"
		},
		"b": {
			"option b": "option2, option2.1, option2.2"
		},
		"c": "option3"
	},
	"two": {
		"d": {
			"option d": "option3, option3.1, option3.2"
		},
		"e": "option4"
	},
	"three": {
		"f": {
			"optionf": "option5,option5.1"
		}
	}
}
if (options.hasOwnProperty(newValue)) {
for (var keys in options) {
var keyValue = options[keys];
g_form.addOption("sb2", "", "--None--");
for (var innerKey in KeyValue) {
var keyName = innerkey;
g_form.addOption("sb2", keyName, keyName);
}
}
}

Client script on sb2 field:

var options = {
	"one": {
		"a": {
			"option a": "option1, option1.1, option1.2"
		},
		"b": {
			"option b": "option2, option2.1, option2.2"
		},
		"c": "option3"
	},
	"two": {
		"d": {
			"option d": "option3, option3.1, option3.2"
		},
		"e": "option4"
	},
	"three": {
		"f": {
			"optionf": "option5,option5.1"
		}
	}
}
var sb1Value = g_form.getValue("sb1");
if (options.hasOwnProperty(sb1Value)) {
var keyValue = options[sb1Value];
if (keyValue.hasOwnProperty(newValue) {
var innerValue = keyValue[newValue];
if (typeof innerValue == "object") {
g_form.addOption("sb3", "", "--None--");
for (var keys in innerValue) {
var keyName = keys;
g_form.addOption("sb3", keyName, keyName);
}
} else {
g_form.addOption("sb3", "", "--None--");
g_form.addOption("sb3", innerValue, innerValue);
}
}
}

Client script on sb3 field:

var options = {
	"one": {
		"a": {
			"option a": "option1, option1.1, option1.2"
		},
		"b": {
			"option b": "option2, option2.1, option2.2"
		},
		"c": "option3"
	},
	"two": {
		"d": {
			"option d": "option3, option3.1, option3.2"
		},
		"e": "option4"
	},
	"three": {
		"f": {
			"optionf": "option5,option5.1"
		}
	}
}
var sb1Value = g_form.getValue("sb1");
var sb2Value = g_form.getValue("sb2");
if (options.hasOwnProperty(sb1Value)) {
var keyValue = options[sb1Value];
if (keyValue.hasOwnProperty(sb2Value) {
var innerValue = keyValue[sb2Value];
if (typeof innerValue == "object") {
if (innerValue.hasOwnProperty(newValue) {
for (var keys in innerValue) {
var innerValueData = innerValue[newValue];
var innerValueArray = innerValueData.split(",");
g_form.addOption("sb4", "", "--None--");
for (var index = 0; index < innerValueArray.length; index++) {
g_form.addOption("sb4", innerValueArray[index], innerValueArray[index]);
}
}
} 
}
}