Access Nested JSON objects and their attributes Angularjs

Question

I am a new bie to angular and trying to learn it. I am trying to display user data from a webservice that I received as response. here's the response

    {
    "Users": {
        "SearchTerm": "angularjs ra1",
        "ResultsPerPage": "20",
        "RecordStartNumber": "0",
        "TotalEstimatedResults": "6",
        "User": [{
            "WWID": "123456",
            "Email": "[email protected]",
            "BusinessTitle": "Project Manager",
            "Name": "Mary Wilson",
            "firstname": "Mary",
            "lastname": "Wilson",
            "idsid": "RAP"
        }, {
            "WWID": "1234567",
            "Email": "[email protected]",
            "BusinessTitle": "Quality Assurance",
            "Name": "Steve Smith",
            "firstname": "Steve",
            "lastname": "Smith",
            "idsid": "DRPRESTO"
        }, {
            "WWID": "12345678",
            "Email": "[email protected]",
            "BusinessTitle": "Chef",
            "Name": "Jon Jones",
            "firstname": "Jon",
            "lastname": "Jones",
            "idsid": "JJONES"
        }]
    }
}

MyScript.js

    var Application = angular.module('TestModule', []);
Application.controller('TestController', function ($scope,$http) {
    $scope.TestValue = "Hello World from Controller";
    $scope.Myfunc = function asdf() {
        $http.get('http://unifiedcollaborationprofile.gots.com/search/expert/data/v2/?apiKey=SECRET&listFromPersonNumber=0&numPeoplePerPage=20&query=angularjs+ra1&returnFriendlyResults=true').then(
            function (response) {
                $scope.users = [];
                angular.forEach(response.Users, function (value, key) {
                    $scope.users.push(value);
                });
            });
    };
});

Page.html

<!DOCTYPE html>
<html ng-app="TestModule">
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
{{2+3}}
<body>
    <div ng-controller="TestController">
        {{2+3}}
        {{TestValue}}
        <input type="text" ng-model="TestValue" />
        <input type="button" value="Click Me To Get All Users!!!!" ng-click="Myfunc()" />
        <ul ng-repeat="k in users">
            <li>WWID:{{k.WWID}}  Email:{{k.Email}}  Name:{{k.Name}}  IDSID:{{k.idsid}}</li>
        </ul>

    </div>
</body>
</html>
<script src="scripts/angular.min.js"></script>
<script src="scripts/MyScripts/MyScript.js"></script>

But nothing gets rendered on my Page. I am not sure if I am rightly accessing the nested User object in Users Collection of JSON and its properties. what am I missing.

It's possible I'm reading it wrong, but it looks like you're trying to loop through the Users level of the JSON, which isn't actually an array. It looks like the Users property has a couple of random properties, then another property User which holds the array of users — Blundering Philosopher
– Blundering Philosopher, Commented Apr 7, 2017 at 23:25
I declared users as an array in the code $scope.users = [];.what do you mean by its not an array? — Programmerzzz
– Programmerzzz, Commented Apr 7, 2017 at 23:27
Aah sorry, the Users level of the JSON data is not an array -> You have "Users": {...} - the data at this level is not an array. Does that make sense? — Blundering Philosopher
– Blundering Philosopher, Commented Apr 7, 2017 at 23:28
I think this is what TypedSource was trying to mention below - instead of doing angular.forEach(response.Users... do angular.forEach(response.Users.User -> the key difference is the extra .User at the end. You've already tried that? — Blundering Philosopher
– Blundering Philosopher, Commented Apr 7, 2017 at 23:32

maurycy · Accepted Answer · 2017-04-07 23:40:53Z

2

I've created plunker with your code and all I did to make it work is to change it to this:

$scope.Myfunc = function asdf() {
    $http.get('test.json').then(function(response) {
      $scope.users = [];
      angular.forEach(response.data.Users.User, function(value, key) {
        $scope.users.push(value);
      });
    });
  };

http://plnkr.co/edit/Fu1tCnhxSn9dgBXtTJ9r?p=preview

You must remember that then after http promise gets resolved receives an object that contains several values: status code, headers and data that will contain your data

answered Apr 7, 2017 at 23:40

maurycy

8,4201 gold badge29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Blundering Philosopher Over a year ago

This was the issue, FYI - adding .data

Akashii · Accepted Answer · 2017-04-07 23:22:36Z

1

I think problem is here

 $scope.users = [];
                angular.forEach(response.Users, function (value, key) {
                    $scope.users.push(value);
                });

try change to

$scope.users = response.data.Users

or you can change to

 $scope.users = [];
                    angular.forEach(response.data.Users, function (value, key) {
                        $scope.users.push(value);
                    });

answered Apr 7, 2017 at 23:22

Akashii

2,2815 gold badges19 silver badges32 bronze badges

4 Comments

Programmerzzz Over a year ago

this just gives list items equal to number of users returned by the service but no data yet..:(

Akashii Over a year ago

@Programmerzzz in your html , try change to k.user.WWID

TypedSource Over a year ago

can not be. definitly is he has to access response.Users.User because here is the array he wants to access

Akashii Over a year ago

@Programmerzzz dont change anything in html and in js try change to response.data.Users.User , it work well

TypedSource · Accepted Answer · 2017-04-07 23:24:59Z

1

angular.forEach(response.Users.User, function (value, key) {
 $scope.users.push(value);
});

your array is nested so you have to call the array in the object

edited Apr 7, 2017 at 23:24

answered Apr 7, 2017 at 23:23

TypedSource

7084 silver badges12 bronze badges

3 Comments

TypedSource Over a year ago

sure ur response is what you exprect to get and it's json object and not json string?

Programmerzzz Over a year ago

I think its a JSON string, you mean we need to parse it before we do the processing on it using forEach loop?

TypedSource Over a year ago

console.log(response) if it is displayed as object what you can expand, you dont need to parse. otherwhise JSON.parse(response) before the loop

Collectives™ on Stack Overflow

Access Nested JSON objects and their attributes Angularjs

3 Answers 3

1 Comment

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related