Populating dropdown list from json

Question

I'm trying to populate parent/child dropdown lists into my HTML form.The dropdown lists have to contain cars/models that are loaded from a json file which looks like this :

[{"value":"ACURA","title":"Acura","models":
    [{"value":"CL_MODELS","title":"CL Models (4)"},
    {"value":"2.2CL","title":" - 2.2CL"},
    {"value":"2.3CL","title":" - 2.3CL"},
    {"value":"MDX","title":"MDX"},
    {"value":"NSX","title":"NSX"},
    {"value":"RDX","title":"RDX"},
    {"value":"ACUOTH","title":"Other Acura Models"}]},
{"value":"ALFA","title":"Alfa Romeo","models":[{"value":"ALFA164","title":"164"},
    {"value":"ALFA8C","title":"8C Competizione"},
    {"value":"ALFAGT","title":"GTV-6"},
    {"value":"MIL","title":"Milano"},
    {"value":"SPID","title":"Spider"},
    {"value":"ALFAOTH","title":"Other Alfa Romeo Models"}]}]

And for populating I'm trying smth like this :

    $.getJSON("textfile.txt", function( json )
    $.each(json, function(key, value) {
    $('select[name=cars]').append('<option value="' + key + '">' + json[key] + '</option>');
}); 



<select name="cars"></select>
<select name="models"></select>

But it doesn't even want to show me the cars whats left for the models... I am assuming , I'm not navigating it correctly, beacuse from the example i got this code it is working properly, which i got from here https://www.techenclave.com/community/threads/populate-a-drop-down-list-from-a-text-file.147816/

I hope this info is enough. Thank you in advance !

Answer 1

Is this a typo in your JavaScript? Try out this updated code, with comments for explanation:

$.getJSON("textfile.txt", function( json ) {  // Missing this curly brace.
  $.each(json, function(key, value) {
    // Change key and json[key] to json[key].value and json[key].title
    $('select[name=cars]').append('<option value="' + json[key].value + '">' + json[key].title + '</option>');
  }); 
});  // Are you missing this as well?

Try the Chrome Console (F12), or Firebug to check for JavaScript errors. You could also try console.log(json) to verify that you are really getting what you expect from your server.

Note that in your example, json will be an array containing two objects, each with three properties: value, title, and models. Each models property, in turn will be an array of objects, each with two properties, value and title.

Just for fun I decided to build you a little extra code. You can see the full fiddle here: https://jsfiddle.net/zzr9om38/

$.each(json, function(key, data) {
    $('select[name=cars]').append('<option value="' + json[key].value + '" data-index="'+key+'">' + json[key].title + '</option>')
});

$('select[name=cars]').change(function(obj){
    var selectedIndex = $(this).find(":selected").attr("data-index");
    $('select[name=models]').find("option:gt(0)").remove();
    if(selectedIndex != undefined) {
        $.each(json[selectedIndex].models, function(key, data) {
            $('select[name=models]').append('<option value="' + json[selectedIndex].models[key].value + '">' + json[selectedIndex].models[key].title + '</option>')
        });
    }
});