使用嵌套的 JSON 数据填充两个 Select答案

【问题标题】：Populate two Selects with nested JSON data使用嵌套的 JSON 数据填充两个 Select
【发布时间】：2018-05-03 22:26:47
【问题描述】：

我之前使用过之前帖子 (Use jQuery to change a second select list based on the first select list option) 的工作版本来填充两个选择框 - 一个带有批发商名称 (#wholesaler_name)，第二个带有所选批发商覆盖的城市列表 ( #wholesaler_city）。

JSON 数据源已从原始数据源扩展，现在包含每个城市的 id，我正在努力弄清楚如何提取位置和 id 的数据，如下所示。

旧结构是：

{
  "Wholesaler 1": [
    "City 1",
    "City 2",
    "City 3"
  ],
  "Wholesaler 2": [
    "City 4",
    "City 5",
    "City 6"
  ]
}

新的 JSON 结构是：

{
  "Wholesaler 1": {
      "locations": [
          { "name":"City 1", "id":"12345" },
          { "name":"City 2", "id":"56789" },
          { "name":"City 3", "id":"01234" }
      ]
    },
    "Wholesaler 2": {
      "locations": [
          { "name":"City 4", "id":"34567" },
          { "name":"City 5", "id":"89012" },
          { "name":"City 6", "id":"34567" }
      ]
    }
}

目的是使用数据填充两个选择框，第二个根据第一个的值更改（如上面引用的帖子）。我使用的代码如下：

$(document).ready(function () {


 "use strict";

 var selectData, $wholesaler;

 function updateSelects() {
   var cities = $.map(selectData[this.value], function (wholesaler) {
     return $("<option />").text(wholesaler);
   });

   $("#wholesaler_city").empty().append(cities);
 }

 $.getJSON("wholesalers-test.json", function (data) {

  var state;
  selectData = data;
  $wholesaler = $("#wholesaler_name").on("change", updateSelects);
    for (state in selectData) {
       $("<option />").text(state).appendTo($wholesaler);
    }
    $wholesaler.change();

  });
});

所以我需要修改“城市”变量以提取每个条目的“位置/名称”的值，并且我还需要从每个城市的 id 创建一个单独的“id”变量。

但是，虽然第一个选择填充了批发商名称，但第二个只是 [object Object]、[object Object] 等条目。

我尝试了任意数量的点和括号符号的组合来尝试获取数据，但我知道我遗漏了一些明显的东西 - 这不是我常用的领域，所以任何指针都将不胜感激！

【问题讨论】：

标签： javascript jquery arrays json

【解决方案1】：

由于城市变成了一个对象数组，您还需要循环这个数组以逐个添加选项。另外，需要将每个城市对象的属性作为每个选项的文本和值。

$(document).ready(function(){

 "use strict";

 var selectData, $wholesaler;

 function updateSelects() {
   var cities = $.map(selectData[this.value], function (wholesaler) {
   var options = [];
   	if(wholesaler.length > 0){
    	wholesaler.map(function(city){
      	options.push($("<option />").text(city.name).val(city.id));
      });
    }
    return options;
   });
   $("#wholesaler_city").empty().append(cities);
 }

//$.getJSON("wholesalers-test.json", function (data) {
    var state;
    selectData = {
    "Wholesaler 1": {
        "locations": [
            { "name":"City 1", "id":"12345" },
            { "name":"City 2", "id":"56789" },
            { "name":"City 3", "id":"01234" }
        ]
      },
      "Wholesaler 2": {
        "locations": [
            { "name":"City 4", "id":"34567" },
            { "name":"City 5", "id":"89012" },
            { "name":"City 6", "id":"34567" }
        ]
      }
  };;
    $wholesaler = $("#wholesaler_name").on("change", updateSelects);
      for (state in selectData) {
         $("<option />").text(state).appendTo($wholesaler);
      }
      $wholesaler.change();
//});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="wholesaler_name"></select>
<select id="wholesaler_city"></select>

【讨论】：

【解决方案2】：

您需要对您的代码进行以下更改：

function updateSelects() {
  var wholesaler = selectData[value];
  var cities = [];
  for (var idx in wholesaler.locations){
    cities.push("<option>" + wholesaler.locations[idx].name + "</option>");
  }   

  $("#wholesaler_city").empty().append(cities);
 }

在您的情况下，与其尝试使用 jQuery 的便利功能，不如在一个简单的循环中手动编译 html 更简单。

【讨论】：