在下拉列表中使用Jquery解析JSON

Question

I am building a specific location selector using dropdowns. I need 3 dropdown for the same. Now i got the json and trying to parse it accordingly but i am having some problems. Here is small part of json i am using.

{
"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"]}
}

So i am trying to parse states into one dropdown , and based on states sub-region can be selected , and based on sub-regions city name can be selected. for eg. If i select "Andhra Pradesh" on one dropdown , other must show "East Godavri" and "chittoor" and whichever i select then must show it's cities in third dropdown. So far i have tried using 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>"
    );
  });
});


 });

I am getting all the city names but not sub-regions , Anyone who can help me

Answer 1

First let's restruction JSON data to this for contain an option id (To use id for option's value)

[
  {
    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" }
        ]
      }
    ]
  }
]

Update the fetch code to save data to variable.

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

Then assign event to select

$("#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>`);
  });
});

Here for the full example

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