使用 Angular 从键值数组中获取 JSON 值答案

【问题标题】：Get JSON value from key value array with Angular使用 Angular 从键值数组中获取 JSON 值
【发布时间】：2013-10-22 14:27:09
【问题描述】：

您好，我是 Angular 新手，只是想学习如何做一些事情。我一直在尝试显示以下数据。使用适用于 chrome 的 Batarang 插件，我可以看到我的 restful 网络服务返回以下包装到我的模型中的 json。

    { 
    course:  { 
        country: Test1
        numberEnrolledPerMonthPerWeek:  { 
            entry: 
            [  { 
                key: 2
                value:  { 
                    numberEnrolled: 0
                    weeks: 2
                    year: 2011
                } 
            } ,  { 
                key: 3
                value:  { 
                    numberEnrolled: 4
                    weeks: 3
                    year: 2011
                } 
            } ,  { 
                key: 4
                value:  { 
                    numberEnrolled: 6
                    weeks: 4
                    year: 2011
                } 
            } ,  { 
                key: 8
                value:  { 
                    numberEnrolled: 0
                    weeks: 8
                    year: 2011
                } 
            }  
            ]
        } 
    } 
 }

我正在尝试将每个键的 numberEnrolled 值取出到一列中。所以在我的html中我有以下内容

<table class="table table-striped table-bordered">
            <tr ng-repeat="course in enrolledcourses.enrolledEnrolment">
                <td>                                
                    {{course.country}}
                </td>   
                <td>
                    {{course.numberEnrolledPerMonthPerWeek[2].numberEnrolled}}
                </td>               
            </tr>   
        </table>

{{course.numberEnrolledPerMonthPerWeek[2].numberEnrolled}} 没有返回任何值，所以任何人都可以告诉我获取 numberEnrolled 值的正确语法是什么。

我试过了

{{course.numberEnrolledPerMonthPerWeek.2.numberEnrolled}}
{{course.numberEnrolledPerMonthPerWeek[2][numberEnrolled]}}

我的控制器代码如下

.controller('PeopleCtrl', function($scope, recruitmentFactory) {
    $scope.enrolledcourses = recruitmentFactory.get();


    $scope.test = "hello";
    $scope.save = function() {
        alert("save has been called");
    };
})

【问题讨论】：

如果这是在控制器中，请出示。是$scope 中的型号吗？在任何情况下，numberEnrolledPerMonthPerWeek 都是一个对象，并且该字段 2 不存在
我可以看到它是一个对象，但我如何获得该对象中的条目

标签： json angularjs angularjs-scope angularjs-ng-repeat

【解决方案1】：

首先，您的 JSON 有很多错误。也许这只是你得到的输出，但以防万一:: 缺少逗号，Test 是一个符号，但我想它是一个字符串。

$scope.enrolledcourses = {
    course : {
    country: 'Test1',
    numberEnrolledPerMonthPerWeek: {
        entry: [{
            key: 2,
            value: {
                numberEnrolled: 0,
                weeks: 2,
                year: 2011,
            }
        }, {
            key: 3,
            value: {
                numberEnrolled: 4,
                weeks: 3,
                year: 2011
            }
        }, {
            key: 4,
            value: {
                numberEnrolled: 6,
                weeks: 4,
                year: 2011
            }
        }, {
            key: 8,
            value: {
                numberEnrolled: 0,
                weeks: 8,
                year: 2011
            }
        }]
    }
    }
};

那么你的 html 需要访问正确的属性：

    <tr ng-repeat="course in enrolledcourses">
        <td>{{course.country}}</td>
        <td>{{course.numberEnrolledPerMonthPerWeek.entry[2].value.numberEnrolled}}</td>
    </tr>

这是live example

【讨论】：

【解决方案2】：

只是为了提供一些额外的帮助：在弄清楚如何浏览 JSON 数据时，我经常遇到这个问题。尝试使用可视化工具，并验证您的 JSON 以确保其正确。

这是我用来可视化数据的方法： http://jsonviewer.stack.hu/ 此处验证： http://jsonlint.com/

【讨论】：

【解决方案3】：

numberEnrolledPerMonthPerWeek[2] is not your array

试试

numberEnrolledPerMonthPerWeek.entry[2]

【讨论】：

尝试上述方法会产生 {"key":"4","value":{"numberEnrolled":"6","weeks":"4","year":"2011"} }

【解决方案4】：

好的，所以我做了以下操作来获取价值

{{course.numberEnrolledPerMonthPerWeek.entry[2].value.numberEnrolled}}

【讨论】：