Разбор JSON с использованием Jquery в выпадающих списках

Question

Я создаю определенный селектор местоположения, используя выпадающие списки. Мне нужно 3 выпадающих для того же. Теперь я получил JSON и пытаюсь разобрать его соответственно, но у меня есть некоторые проблемы. Вот небольшая часть json, которую я использую.

{
"Chandigarh": {
    "CHANDIGARH": ["Sector 21 (Chandigarh)", "Sector 22 (Chandigarh)", "Sector 23 ( Chandigarh)", "Sector 26 (Chandigarh)", "Sector 29 (Chandigarh)", "Sector 30"]}
 "Andhra Pradesh": {
    "EAST GODAVARI": ["D Vemavaram", "Gangavaram", "GSL Medical College", "Konthamuru", "Navara", "Satellite City"]
      "CHITTOOR": ["Appa Rao Street", "Madanapalle Spinning Mills Gds", "Akkurthi", "Chiyyavaram", "Chodavaram", "Gottipudi", "Kasaram", "Muchivolu", "Obulayapalle"]}
}

Итак, я пытаюсь проанализировать штаты в одном раскрывающемся списке, и на основе штатов можно выбрать субрегион, а на основе субрегионов можно выбрать название города. например, Если я выберу «Андхра-Прадеш» в одном раскрывающемся списке, в другом должны отобразиться «Восточный Годаври» и «Читтор», и в зависимости от того, что я выберу, в третьем раскрывающемся списке будут показаны его города. До сих пор я пытался использовать jquery getjson

$.getJSON(url, function(data) {
console.log(data);
$.each(data, function(index, value) {


  $("#state").append(
    '<option value="' + index + '">' + index + "</option>"
  );
});


 });



 $("#state").change(function() {


countryCode = $("#state").val();

$.getJSON(url, function(data) {

  $('#sub').append('<option value="">Please select your region</option>');
  $.each(data.response.venue.countryCode, function(index, value) {

    $("#sub").append(
      '<option value="' + index + '">' + index + "</option>"
    );
  });
});


 });

Я получаю все названия городов, но не субрегионы. Любой, кто может мне помочь

Answer 1

Сначала давайте восстановим данные JSON, чтобы они содержали идентификатор опции (для использования id для значения опции)

[
  {
    id: 1,
    name: "Chandigarh",
    regions: [
      {
        id: 2,
        name: "CHANDIGARH",
        areas: [
          { id: 3, name: "Sector 21 (Chandigarh)" },
          { id: 4, name: "Sector 22 (Chandigarh)" },
          { id: 5, name: "Sector 23 ( Chandigarh)" },
          { id: 6, name: "Sector 26 (Chandigarh)" },
          { id: 7, name: "Sector 29 (Chandigarh)" },
          { id: 8, name: "Sector 30" }
        ]
      }
    ]
  },
  {
    id: 9,
    name: "Andhra Pradesh",
    regions: [
      {
        id: 10,
        name: "EAST GODAVARI",
        areas: [
          { id: 11, name: "D Vemavaram" },
          { id: 12, name: "Gangavaram" },
          { id: 13, name: "GSL Medical College" },
          { id: 14, name: "Konthamuru" },
          { id: 15, name: "Navara" },
          { id: 16, name: "Satellite City" }
        ]
      },
      {
        id: 17,
        name: "CHITTOOR",
        areas: [
          { id: 18, name: "Appa Rao Street" },
          { id: 19, name: "Madanapalle Spinning Mills Gds" },
          { id: 20, name: "Akkurthi" },
          { id: 21, name: "Chiyyavaram" },
          { id: 22, name: "Chodavaram" },
          { id: 23, name: "Gottipudi" },
          { id: 24, name: "Kasaram" },
          { id: 25, name: "Muchivolu" },
          { id: 26, name: "Obulayapalle" }
        ]
      }
    ]
  }
]

Обновить код выборки, чтобы сохранить данные в переменной.

var states;

$.getJSON(url, function (data) {
  states = data; // Save data to variable, so no need to fetch data everytime user change the select
  $("#state").html(`<option>Select State..</option>`);
  $("#region").html(`<option>Select region..</option>`);
  $("#area").html(`<option>Select area..</option>`);
  $.each(states, function (index, state) {
    $('#state').append(`<option value="${state.id}">${state.name}</option>`);
  });
});

Затем назначьте событие для выбора

$("#state").bind("change", function() { // When select state change
  let state = states.find(s => s.id == $(this).val());

  // set region options

  $("#region").html(`<option>Select region..</option>`);
  $.each(state.regions, function(index, region) {
    $("#region").append(`<option value="${region.id}">${region.name}</option>`);
  });

  $("#area").html(`<option>Select area..</option>`);
});

$("#region").bind("change", function() { // When select region change
  let region = states
    .map(s => s.regions)
    .flat()
    .find(r => r.id == $(this).val());

  // set area options

  $("#area").html(`<option>Select area..</option>`);
  $.each(region.areas, function(index, area) {
    $("#area").append(`<option value="${area.id}">${area.name}</option>`);
  });
});

Здесь для полного примера

https://codesandbox.io/s/5k87rkr16p