Create two dependent select lists from a JSON data

Question

I'm trying to create two dependent lists which the values are extracted from a JSON variable.

The data is in this format:

{
      "Name1": [
        {
          "Name1_Nickname": "ID1"
        }
      ],
      "Name2": [
        {
          "Name2_Nickaname": "ID2"
        }
      ],
      "Name3": [
        {
          "Name3_Nickname1": "ID3_1"
        }, {
          "Name3_Nickname2": "ID3_2"
        }
      ]
    }

So as you see i'm working on a Map<String,List<Map<String,String>>> which i parsed to a json object. I'm trying to find a way to create a first Picklist with all the Name1, Name2, Name3 and depending on which Name we choose create a second picklist with Name1_Nickname for example if we choose Name1 and Name3_Nickname1, Name3_Nickname2 if we choose Name3

I have done created a function that gets all the keys ( Name1 name2 name3...) but i don't know how to access to the other fields ( Name1_Nickname etc..) i just need some advices to make sur that i'm on the right way i'm not asking you to write code for me — Joey Pablo, Nov 12 '15 at 17:16
I recommend to read [Access / process (nested) objects, arrays or JSON](http://stackoverflow.com/q/11922383/218196) then. — Felix Kling, Nov 12 '15 at 17:27
*i just need some advices to make sur that i'm on the right way i'm not asking you to write code for me"* Then please clarify your question, because as it is, it is not clear what exactly you want to know. — Felix Kling, Nov 12 '15 at 17:28
hope that it will be clear now.. I have an apex variable with i put in json object var res = "{!JSENCODE(jsonResult)}"; var result = JSON.parse(res); So result Is like a in the example above. I want to know if it's possible to extract the keys and create two selectOption list with the keys values. The first list contains like in the example Name1, Name2, Name3 and the second list contains Name1_Nickname ( if we chose Name1 ) etc.. — Joey Pablo, Nov 12 '15 at 17:35

Dave · Accepted Answer · 2015-11-12T20:05:24.360

It's fairly straightforward to loop through your object and set the select options based off that object. Then you will need an event handler to handle the changing of the first select.

var items = {
      "Name1": [
        {
          "Name1_Nickname": "ID1"
        }
      ],
      "Name2": [
        {
          "Name2_Nickaname": "ID2"
        }
      ],
      "Name3": [
        {
          "Name3_Nickname1": "ID3_1"
        }, {
          "Name3_Nickname2": "ID3_2"
        }
      ]
    };

var one = document.getElementById("one");
var two = document.getElementById("two");

//loop the properties to build the first select
for(var prop in items) {
  var option = new Option(prop, prop);
  one.appendChild(option);
}

//add event handler on the first
one.addEventListener("change", function(e) {
  var value = e.target.value;
  
  //clear the second
  for(var i = two.options.length; i > 0; i--) {
    two.options[i - 1].remove();
  }
  
  //append items to the second
  items[value].forEach(function(item) {
    for (var itemProp in item) {
      var option = new Option(itemProp, item[itemProp]);
      two.appendChild(option);
    }
  });
  
});

//force a change event to set the second dropdown to the default
var changeEvent = new Event('change');
one.dispatchEvent(changeEvent);

<select id="one"></select>
<select id="two"></select>

Thank YOU so much you are a life saver! – Joey Pablo Nov 12 '15 at 21:32 — Joey Pablo, Nov 12 '15 at 21:32

Create two dependent select lists from a JSON data

1 Answers1