Get JSON value from key value array with Angular
Solution 1
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.
$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:
<tr ng-repeat="course in enrolledcourses">
<td>{{course.country}}</td>
<td>{{course.numberEnrolledPerMonthPerWeek.entry[2].value.numberEnrolled}}</td>
</tr>
this is a live example
Solution 2
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.
Here is what I use to visualize the data: http://jsonviewer.stack.hu/ Validation here: http://jsonlint.com/
user1107753
Updated on January 01, 2020Comments
-
user1107753 over 4 years
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.
{ 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
<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.
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"); }; })
-
user1107753 over 10 yearstrying the above produces {"key":"4","value":{"numberEnrolled":"6","weeks":"4","year":"2011"}}