Question

我有一个嵌套的JSON对象，我试图遍历以便在<select>标记中填充选项，具体取决于用户选择的选项

首先选择标记：

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

在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-loop中的 - 值。

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

Answer 1

首先，您必须决定要对数据执行的操作。 foodTypes[key]将返回包含{"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>');
        }
    }
}

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

1 个答案: