使用嵌套 JSON 对象填充选择标记答案

【问题标题】：Populate Select Tag with Nested JSON Object使用嵌套 JSON 对象填充选择标记
【发布时间】：2015-09-16 14:42:05
【问题描述】：

我有一个嵌套的 JSON 对象，我正在尝试遍历它，以便根据用户选择的选择选项填充 <select> 标记中的选项

首先选择标签：

<select name="food-category" id="food-category">
    <option id="italian">Italian</option>
    <option id="bbq">BBQ</option>
</select>

选择 change 事件时返回的 JSON 响应

{
    "food-types": {
        "italian": [
            {"pasta": "Pasta"},
            {"pizza": "Pizza"},
            {"chicken-parm": "Chick Paremesan"},
        ],
        "bbq": [
            {"ribs": "Ribs"},
            {"burger": "Burger"},
            {"steak": "Steak"}
        ]
    }
}

我有一个 Ajax 请求，它填充了我的 <options>，但是每个对象都属于不同的食物类型类别。

$('#food-category').on('change', function (e) {
//AJAX request omitted for brevity
var data = this.get('responseData');
foodTypes= data.["food-types"];

for(key in foodTypes) {
    if(foodTypes.hasOwnProperty(key)){
    $('#search-food').append('<option value="' + key + '">' + foodTypes[key] + '</option>');
}

所以在我的第二个选择标签中，最终只有一个选项

<select name="search-food" id="search-food">
    <option value="food-type">[object Object],[object Object],[object Object],[object Object],[object Object]</option> 
</select>

如何让我的选项从嵌套的 JSON 响应中仅显示每个选项的单一食物类型类别？我正在考虑一个检查食物类别的值并使用 case 语句返回所选类别的函数，但我不确定如何将其插入设置键值的 for 循环中。

希望这一切都有意义 - 如果需要，可以包含更多细节

【问题讨论】：

这是一个非常糟糕的数据结构。使用{value: "pasta", text: "Pasta"} 之类的东西会简单得多，然后你就可以使用一致的密钥
如果是这种情况，不是每个选项都输出为<option value="value">，就像我的for循环中设置的那样？
不，您将调整输出以使用已知对象键

标签： javascript jquery html json

【解决方案1】：

首先，您必须决定要如何处理您的数据。 foodTypes[key] 将返回一个 array 包含对象，例如 {"pasta": "Pasta"}。所以，是的，你的输出听起来是对的。假设您有一个变量selectedFoodType，其中包含要循环的数组，那么您可以这样做。

// Say selectedFoodType is a string "italian" that you got from somewhere
var myFoods = foodTypes[selectedFoodType]; 

for(key in myFoods) { // Then myFoods will be your array of pasta, pizza etc
    if(myFoods.hasOwnProperty(key)) {
      $('#search-food').append('<option value="' + key + '">' + myFoods[key] + '</option>');
    }
}

如果您想遍历所有食物，那么您需要使用 f.e. 进一步深入研究结构。第二个for 循环

for(i in foodTypes) {
    var myFoods = foodTypes[i];
    // From here it's the exact same thing as the example above
    // just now we're fetching the key from the outer for-loop
    // and because of the outer loop we're doing it for each foodType
    for(j in myFoods) {
        if(myFoods.hasOwnProperty(j)) {
          $('#search-food').append('<option value="' + j + '">' + myFoods[j] + '</option>');
        }
    }
}

【讨论】：