使用Angular从键值数组获取JSON值
嗨,我是个新手,我只是想学习如何做一些事情。我一直在试图显示以下数据。使用chrome的Batarang插件,我可以看到我的restful Web服务返回以下json,该json被包装到我的模型中使用Angular从键值数组获取JSON值,json,angularjs,angularjs-scope,angularjs-ng-repeat,Json,Angularjs,Angularjs Scope,Angularjs Ng Repeat,嗨,我是个新手,我只是想学习如何做一些事情。我一直在试图显示以下数据。使用chrome的Batarang插件,我可以看到我的restful Web服务返回以下json,该json被包装到我的模型中 { course: { country: Test1 numberEnrolledPerMonthPerWeek: { entry: [ { key: 2
{
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>
我的控制器代码如下
.controller('PeopleCtrl', function($scope, recruitmentFactory) {
$scope.enrolledcourses = recruitmentFactory.get();
$scope.test = "hello";
$scope.save = function() {
alert("save has been called");
};
})
试一试
好的,我做了下面的步骤来得到这个值
{{course.numberEnrolledPerMonthPerWeek.entry[2].value.numberEnrolled}}
首先,您的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>
{{当然。国家}
{{course.numbernRolledPermonthPerweek.entry[2].value.numbernRolled}
这是一个只是为了提供一些额外的帮助:我在弄清楚如何在JSON数据中导航时经常遇到这个问题。尝试使用可视化工具,并验证JSON以确保其正确性 以下是我用来可视化数据的方法: 此处验证:
如果这是在控制器中,请显示它。模型是否在
$scope
中?在任何情况下,numberEnrolled PermonthPerweek都是一个对象,并且字段2
不存在。我可以看到它是一个对象,但是我如何获得该对象中的条目尝试上述操作会产生{“key”:“4”,“value”:{“numberEnrolled”:“6”,“weeks”:“4”,“year”:“2011”}
{{course.numberEnrolledPerMonthPerWeek.entry[2].value.numberEnrolled}}
$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
}
}]
}
}
};
<tr ng-repeat="course in enrolledcourses">
<td>{{course.country}}</td>
<td>{{course.numberEnrolledPerMonthPerWeek.entry[2].value.numberEnrolled}}</td>
</tr>