Заполнить селекторы с помощью json не работает должным образом

Question

Я пытаюсь сделать два селектора заполненными JSON. Один для штатов и один для городов. Если я выберу штат, следующий селектор должен показать мне города, которые находятся в этом штате. Я сделал это до сих пор с помощью функций. Моя функция состояния работает нормально, но у меня проблемы с селектором города. Это ничего не показывает. Я застрял здесь.

В моем файле scripts.js

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);
}

И в моем ready.js, где я использую функции, которые у меня есть

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);
    });
  });

Вот HTML

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

Answer 1

Проблема в том, что вы не можете перебирать такие города с помощью for(var i in data.states.cities){...}. Вам нужно перебрать только города, принадлежащие выбранному штату.

Вот рабочий пример.

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>

Вы, вероятно, захотите сделать что-то вроде вызова populateCities в качестве обратного вызова, когда вы закончите с populateState на document.ready, так как оно приходит с первым выбранным состоянием First, но не заполняет его города. Но по крайней мере это поможет вам справиться с проблемой.