在AngularJS中顯示嵌套的JSON

Question

我有一個使用AngularJS，Onsen UI和Monaca開發的跨平台應用程序。

在我的其中一個頁面上，我進行了API調用，該API返回了一個嵌套的JSON對象。 我可以使用$ http.get（）讀取JSON對象，並且可以遍歷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>

運行上面的命令后，我得到的結果將在列表中顯示水果名稱，但是對於每個水果項目，僅顯示一個單選按鈕，然后顯示JSON格式的代碼，例如

• 蘋果
• （此處僅顯示一個單選按鈕）
• [{“ fruitCheckID”：“ 1”，“ fruitDescription”：“確定”}，{“ fruitCheckID”：“ 2”，“ fruitDescription”：“未成熟”}，{“ fruitCheckID”：“ 3”， ：“爛”}]

該列表中第三個項目符號實際上是向我顯示項目的方式。

在我的app.js中，我得到如下所示的JSON對象，當我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>