Populate Выберите тег с вложенной JSON объект

Question

У меня есть вложенное JSON объект, который я пытаюсь пройти для того, чтобы заполнить опции в <select> тега, на основе которого выбрать опцию пользователь выбирает

Сначала выберите Тэг:

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

ответ JSON вернулся на change выберите событие

{ 
    "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 Tag, один вариант заканчивается время

<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, который устанавливает значения ключа.

Надеется, что это все имеет смысл - может включать в себя более подробной информацию, если это необходимо

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. a второй 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>'); 
     } 
    } 
}