使用 Angular 从键值数组中获取 JSON 值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19520640/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get JSON value from key value array with Angular
提问by user1107753
Hi I am new to angular and just trying to learn how to do a few things. I have got stuck in trying to display the following data. Using the Batarang plugin for chrome i can see my restful webservice returning the following json which is wrapped into my model.
嗨，我是 angular 的新手，只是想学习如何做一些事情。我一直在尝试显示以下数据。使用 Chrome 的 Batarang 插件，我可以看到我的宁静网络服务返回以下 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
}
}
]
}
}
}
I am trying to get the numberEnrolled value out for each key into a column. So in my html I have the following
我正在尝试将每个键的 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}} does not return me any value so can anyone advise what would be the correct syntax to get the numberEnrolled value please.
{{course.numberEnrolledPerMonthPerWeek[2].numberEnrolled}} 不会返回任何值，所以任何人都可以建议获取 numberEnrolled 值的正确语法是什么。
I have tried
我试过了
{{course.numberEnrolledPerMonthPerWeek.2.numberEnrolled}}
{{course.numberEnrolledPerMonthPerWeek[2][numberEnrolled]}}
My controller code is as follows
我的控制器代码如下
.controller('PeopleCtrl', function($scope, recruitmentFactory) {
$scope.enrolledcourses = recruitmentFactory.get();
$scope.test = "hello";
$scope.save = function() {
alert("save has been called");
};
})
采纳答案by Eduard Gamonal
Firstly, your JSON has plenty of mistakes. maybe it's just the output you got, but just in case:: there are missing commas and Test is a symbol but I guess it's intenteded to be a string.
首先，你的 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
}
}]
}
}
};
then your html needs to access the correct properties:
那么您的 html 需要访问正确的属性：
<tr ng-repeat="course in enrolledcourses">
<td>{{course.country}}</td>
<td>{{course.numberEnrolledPerMonthPerWeek.entry[2].value.numberEnrolled}}</td>
</tr>
this is a live example
这是一个活生生的例子
回答by okTalk
Just to provide some extra help: I run into this problem a lot with figuring out how to navigate through JSON data. Try using visualization tools, and validate your JSON to make sure its correct.
只是为了提供一些额外的帮助：我在弄清楚如何浏览 JSON 数据时遇到了很多这个问题。尝试使用可视化工具，并验证您的 JSON 以确保其正确。
Here is what I use to visualize the data: http://jsonviewer.stack.hu/Validation here: http://jsonlint.com/
这是我用来可视化数据的内容：http: //jsonviewer.stack.hu/此处验证：http: //jsonlint.com/
回答by minime
numberEnrolledPerMonthPerWeek[2] is not your array
try
尝试
numberEnrolledPerMonthPerWeek.entry[2]
回答by user1107753
Okay so i did the following to get the value out
好的，所以我做了以下操作来获取价值
{{course.numberEnrolledPerMonthPerWeek.entry[2].value.numberEnrolled}}
