Get JSON value from key value array with Angular

Question

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");
    };
})

if this is in a controller, please show it. is the model in the $scope? in any case, numberEnrolledPerMonthPerWeek is an object and the field 2 doesn't exist there — Eduard Gamonal
– Eduard Gamonal, Commented Oct 22, 2013 at 14:28
i can see that it is an object but how do i get to the entries in that object — user1107753
– user1107753, Commented Oct 22, 2013 at 14:33

Eduard Gamonal · Accepted Answer · 2013-10-22 14:40:56Z

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

okTalk · Accepted Answer · 2013-12-31 18:37:28Z

1

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/

answered Dec 31, 2013 at 18:37

okTalk

1,2421 gold badge11 silver badges12 bronze badges

Comments

minime · Accepted Answer · 2013-10-22 14:30:26Z

0

numberEnrolledPerMonthPerWeek[2] is not your array

try

numberEnrolledPerMonthPerWeek.entry[2]

answered Oct 22, 2013 at 14:30

minime

3443 silver badges10 bronze badges

1 Comment

user1107753 Over a year ago

trying the above produces {"key":"4","value":{"numberEnrolled":"6","weeks":"4","year":"2011"}}

user1107753 · Accepted Answer · 2013-10-22 14:38:38Z

0

Okay so i did the following to get the value out

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

answered Oct 22, 2013 at 14:38

user1107753

1,6565 gold badges26 silver badges37 bronze badges

Collectives™ on Stack Overflow

Get JSON value from key value array with Angular

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related