Populate selectors using json doesn't work as expected

Question

I am trying to make two selector's populated with JSON. One for states and one for cities. If i choose a state the next selector is supposed to show me the cities that are in that state. I've made it so far using functions. My state function is working fine, but I'm having troubles with my city selector. It doesn't show anything. I'm stuck here.

In my scripts.js I have

function populateState(data){
    var listState = "";
    for(var i in data.states){
        listState += '<option value="'+data.states[i].id+'">'+data.states[i].name+'</option>';
    }
    $('#states').html(listState);
}

function populateCities(data){
    var listobj = "";
    for(var i in data.states.cities){
        listobj += '<option value="'+data.states.cities[i].id+'">'+data.states.cities[i].name+'</option>';
    }
    $('#cities').html(listobj);
}

And in my ready.js where i use the functions I have

var dataJson = {
    "states": [
        {
            "name": "First state",
            "id": "1",
            "cities": [
                {
                    "name": "city1",
                    "id": "cos"

                },
                {
                    "name": "city2",
                    "id": "mio"

                },
                {
                    "name": "city3",
                    "id": "top"

                }

            ]
        },
        {
            "name": "Second state",
            "id": "2",
            "cities": [
                {
                    "name": "city4",
                    "id": "or"

                },
                {
                    "name": "city5",
                    "id": "st"
                },
                {
                    "name": "city6",
                    "id": "bs"
                }
            ]
        },
    ]
};

$(document).ready(function() {
populateState(dataJson);

    $("#states").change(function () {
        populateCities(dataJson);
    });
  });

Here`s the HTML

 <select id="states" >
     <option value="000">-Select State-</option>
</select>
 <select id="cities" >
     <option value="000">-Select Cities-</option>
</select>

Answer 1

The issue is that you can't iterate through the cities like that, with for(var i in data.states.cities){...} . You need to iterate through just the cities belonging to the selected state.

Here's a working example.

 function populateState(data){ var listState = ""; for(var i in data.states){ listState += '<option value="'+data.states[i].id+'">'+data.states[i].name+'</option>'; } $('#states').html(listState); } function populateCities(data){ var listobj = ""; for(var i in data.states){ if (data.states[i].id == $("#states").val()) { //this is the selected state, let's get their cities for(var j in data.states[i].cities){ listobj += '<option value="'+data.states[i].cities[j].id+'">'+data.states[i].cities[j].name+'</option>'; } } } $('#cities').html(listobj); } var dataJson = { "states": [ { "name": "First state", "id": "1", "cities": [ { "name": "city1", "id": "cos" }, { "name": "city2", "id": "mio" }, { "name": "city3", "id": "top" } ] }, { "name": "Second state", "id": "2", "cities": [ { "name": "city4", "id": "or" }, { "name": "city5", "id": "st" }, { "name": "city6", "id": "bs" } ] }, ] }; $(document).ready(function() { populateState(dataJson); $("#states").change(function () { populateCities(dataJson); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <select id="states" > <option value="000">-Select State-</option> </select> <select id="cities" > <option value="000">-Select Cities-</option> </select> 

You would probably want to do something like call the populateCities as a callback when you're done with populateState on document.ready , since it comes up with the First state already selected, but doesn't populate its cities. But at least this will get you past your issue.