在 AngularJS 中显示嵌套的 JSON答案

【问题标题】：Displaying nested JSON in AngularJS在 AngularJS 中显示嵌套的 JSON
【发布时间】：2016-05-05 08:14:06
【问题描述】：

我有一个用 AngularJS、Onsen UI 和 Monaca 开发的跨平台应用程序。

在我的一个页面上，我进行了一个 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>

当我运行上面的内容时，我会根据需要在列表中显示水果名称，但是对于每个水果项目，只显示 1 个单选按钮，然后是 JSON 格式的代码 例如

苹果
（此处仅显示 1 个单选按钮）
[{“fruitCheckID”：“1”，“fruitDescription”：“Ok”}，{“fruitCheckID”：“2”，“fruitDescription”：“未成熟”}，{“fruitCheckID”：“3”， "fruitDescription": "烂" }]

该列表中的第三个要点实际上是项目向我显示的方式。

在我的 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);
    });
});

谁能告诉我显示嵌套值的格式哪里出了问题？

【问题讨论】：

你的问题也有答案。与使用 2 foreach 显示所有项目一样，您需要 2nd ng-repeat on options 来显示单选按钮。
试试这个：{{angular.toJson(options.fruitDescription)}}

标签： javascript angularjs json onsen-ui monaca

【解决方案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>

【讨论】：