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

Posted 2023-05-08

【中文标题】在下拉列表中使用 Jquery 解析 JSON

【英文标题】：Parsing JSON using Jquery in dropdowns

【发布时间】：2019-06-20 06:41:13

【问题描述】：

我正在使用下拉菜单构建一个特定的位置选择器。我需要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"]

所以我试图将州解析为一个下拉列表，并且可以选择基于州的子区域，并且可以选择基于子区域的城市名称。 例如。如果我在一个下拉列表中选择“Andhra Pradesh”，其他必须显示“East Godavri”和“chittoor”，无论我选择哪个，都必须在第三个下拉列表中显示它的城市。 到目前为止，我已经尝试过使用 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>"
    );
  );
);


 );

我正在获取所有城市名称，但不是子区域，任何可以帮助我的人

【问题讨论】：

您发布的 JSON 是否准确？如果是这样，有什么办法可以改变结构，让它更有意义？我认为这可能是问题的一部分，因为您有一个大型对象，该对象具有多个具有状态名称的属性，并且这些属性具有带有子区域名称的子属性。我的观点是，除非您知道数据是什么，否则您无法了解 JSON 中的单词代表什么。对你来说，这是有道理的，但对我来说，它看起来令人困惑，这是一个问题。如果你需要一个例子，请告诉我。我只能在这里输入这么多。

【参考方案1】：

首先让我们将 JSON 数据重构为此包含一个选项 id（使用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

【讨论】：

嘿，非常感谢您的帮助，而且效果很好，我只想知道除了手动逐行进行之外，还有什么方法可以重组 json。

您的数据来自哪里？数据库还是 json 文件？

我有一个很大的 json 文件。