Отображение вложенного JSON в AngularJS

Question

У меня есть кросс-платформенное приложение, разработанное в AngularJS, Onsen UI и Monaca.

На одной из моих страниц я вызываю вызов API, который возвращает мне вложенный объект JSON. Я могу прочитать объект JSON, используя $ http.get(), и я могу прокрутить JSON и отобразить элементы высокого уровня, но я не могу отобразить вложенные элементы.

Что я хочу сделать, это отобразить элементы высокого уровня в виде текстового поля, а затем отобразить вложенные элементы в качестве переключателя для каждого элемента высокого уровня.

Пример моего файла JSON будет выглядеть примерно так:

[{ 
    "itemID": "1", 
    "itemDescription": "Apple", 
    "options": [{ 
     "fruitCheckID": "1", 
     "fruitDescription": "Ok" 
    }, { 
     "fruitCheckID": "2", 
     "fruitDescription": "Not Ripe" 
    }, { 
     "fruitCheckID": "3", 
     "fruitDescription": "Rotten" 
    }] 
}, { 
    "itemID": "2", 
    "itemDescription": "Orange", 
    "options": [{ 
     "fruitCheckID": "1", 
     "fruitDescription": "Ok" 
    }, { 
     "fruitCheckID": "2", 
     "fruitDescription": "Not Ripe" 
    }, { 
     "fruitCheckID": "3", 
     "fruitDescription": "Rotten" 
    }] 
}] 

И в моем fruit.html странице Я хочу, чтобы отобразить имена плодовых (itemDescription) в виде текстовых полей с радиокнопками под ними для каждого из пунктов «fruitDescription».

Мои fruit.html страница выглядит следующим образом:

<ul class="list"> 
    <li class="list__item" ng-repeat="checkItemDescription in data"> 
     <span class="list__item__line-height"><strong>{{checkItemDescription.itemDescription}}</strong></span> <!-- WORKING HERE --> 

     <label class="checkbox"> 
      <input type="checkbox" 
       ng-click="toggleSelection(checkItemDescription.itemDescription)"> 
      <div class="checkbox__checkmark"></div> 
      {{checkItemDescription.options}} <!-- NOT WORKING HERE --> 
     </label> 
    </li> 
</ul> 

Что я получаю, когда я бегу вышеуказанных дисплеев плодовых имен в списке, как я хочу, но для каждого элемента фруктов есть только 1 и затем JSON отформатированный код eg

• компании Apple
• (кнопка только 1 радио здесь отображается)
• [{ "fruitCheckID": "1", "fruitDescription": "Ok"}, { "fruitCheckID": "2", " fruitDescription ": "не созрела"}, { "fruitCheckID": "3", "fruitDescription": "Rotten"}]

Где третий буллит в этом списке на самом деле, как элементы отображаются мне ,

В моем app.js Я получаю объект JSON, как показано ниже, и когда I console.log() объект JSON все отображается так, как должен.

// Loop through the JSON [object Object]...[object Object] returned from API call 
angular.forEach($scope.data, function(value, key) 
{ 
    // WORKING 
    console.log("Item ID: " + value.itemID); 
    console.log("Item Description: " + value.itemDescription); 

    // Inner loop to return nested JSON objects 
    angular.forEach(value.options, function(v, k) 
    { 
     // WORKING 
     console.log("Fruit Check ID: " + v.fruitCheckID); 
     console.log("Fruit Description: " + v.fruitDescription); 
    }); 
}); 

Может ли кто-нибудь сказать мне, где я ошибаюсь в формате отображения вложенных значений?

Answer 1

Попробуйте использовать этот код ..

<ul class="list"> 
<li class="list__item" ng-repeat="checkItemDescription in data"> 
    <span class="list__item__line-height"><strong> {{checkItemDescription.itemDescription}}</strong></span> <!-- WORKING HERE --> 

    <label class="checkbox"> 
     <input type="checkbox" 
      ng-click="toggleSelection(checkItemDescription.itemDescription)"> 
     <div class="checkbox__checkmark" ng-repeat="options in data.options "></div><!-- use ng-repeat here --> 
     {{options.fruitDescription}} 
    </label> 
</li>