Create drop down list from multidimentional nested json array

Question

i need to create drop down list based on following json array,there will be 5 drop down list , if i select i need to populate other four for example if i select Hindi in first drop-down list then

Second list           Third list         Forth list        Fifth list
     "History",        "Philosophy",   "Political Science"  "English"   
     "Sociology",       "BLANK"             "BLANK"           "BLANK"
     "Economics"

Now when i use jquery to implement this the list is not populating properly.I can not break down the inner array. i am attaching link of jsfidle.Do i have to change the json format.

{
      "Hindi": [
        [
          "History",
          "Sociology",
          "Economics"
        ],
       "Philosophy",
        "Political Science",
        "English"
      ],
      "Bengali": [
        ["History" ,"Sociology"
        ],
        "Sanskrit",
        "Philosophy",
        "Political Science"
      ],
      "English": [["History","Sociology","Economics"],
        "Philosophy",
        "Political Science",
        ["Bengali","Hindi"]

      ]

    }

Shouldn't each main property have the same structure? Last one is different than the first 2 — charlietfl
– charlietfl, Commented Apr 8, 2015 at 11:11
So if English is selected what goes in 4th and 5th dropdowns? — charlietfl
– charlietfl, Commented Apr 8, 2015 at 11:17
@charlietfl in 4th Political Science and in fifth Bengali and Hindi — Xax
– Xax, Commented Apr 8, 2015 at 11:30

Eugen Halca · Accepted Answer · 2015-04-08 11:20:33Z

1

When parsing JSON assume that you have the same structure for every dropdown :

{"1select":[["2select values..."],[3select values..."],[4select values..."],[5select values..."]]} (if there is no array -> create one)

and than do the same for every dropdown.

CODE :

    var jsonObj = {"Hindi":[["History","Sociology","Economics"],"Philosophy","Political Science","English"],"Bengali":[["History","Sociology"],"Sanskrit","Philosophy","Political Science"],"English":[["History","Sociology","Economics"],"Philosophy","Political Science",["Bengali","Hindi"]]}

function updateSelect() {
    var getOpts = function(raw){
        var values = raw;
        if (!(raw instanceof Array)){
            values = [raw, ""];
        }
        var result = [];
        values.forEach(function(obj){
            result.push(new Option(obj, obj));
        });
        return result;
    };


    var newKey = $("#select1").val();
    var mappings = [{"#select2":0},{"#select3":1},{"#select4":2},{"#select5":3}];
    var selected = jsonObj[newKey];

    mappings.forEach(function(mapping){
        var selector = Object.keys(mapping)[0];
        var index = mapping[selector];
        $(selector).empty();
        var opts = getOpts(selected[index]);
        $(selector).append(opts);
    });

}

$(document).ready(function() { 
    $("#select1").change(updateSelect);
    updateSelect(); // For initial page load.
});

Example : here

answered Apr 8, 2015 at 11:20

Eugen Halca

1,7832 gold badges14 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Xax Over a year ago

thanks , for the implementation, i have one issue if there is multiple group of this type of select row(say in a table each row is a group of 5 select drop down list) how do i distinguish them .say i have dynamically generated them. @Eugen Halca

Collectives™ on Stack Overflow

Create drop down list from multidimentional nested json array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related