Kamal Kamal - 5 months ago 28
AngularJS Question

angular.forEach() not working

Hi friend I'm beginner in angular and getting stuck by using

angular.forEach()
function. I just want to call data from a nested array in
data.json
file. Please check my code below...
****I want to call data from --users-- key****


HTML

<div class="user-container" ng-controller="users">
<ul class="list">
<li ng-repeat="(key, value) in items">
{{key}} <p> {{value}}
</li>
</ul>
</div>


Problems with current code


When run my code in browser Its giving me only 2
<li>
in
ng-repeat
then in {{Key}} I'm getting
0
in first
<li>
and
1
in second
<li>


and in {{value}} I'm getting whole user list in first
<li>
and in second
<li>
their is no data


data.json

{
"data": {
"new": true,
"show_page": false,
"status": "signedin",
"users": [{
"Michele": {
"logo": "xyz.jpg",
"status": "active",
"active_since": 2015,
"order": 1
},
"Gerry": {
"logo": "xyz.jpg",
"status": "active",
"active_since": 2015,
"order": 1
}
}]
},
"success": true
}


Controller.js

var myApp = angular.module('app', []);

myApp.service('userData', ['$http', function($http){
return{
userslist : function(){
return $http({'url' : 'data.json', 'method' : 'GET'}).then(function(response){
return response.data;
}, function(data){
console.log(data)
})
}
}
}]);

myApp.controller('users', ['$scope', '$http', 'userData', function($scope, $http, userData){
userData.userslist().then(function(data){
//var provideDataKey = Object.keys(data.users)[0];
$scope.items = [];
angular.forEach(data, function(item){
//console.log(item.users);
$scope.items.push(item.users)
})
console.log($scope.items)
})
}]);

Answer

response is the HTTP response, with its body (data), headers, etc.

So response.data is the body, which looks like this:

{
    "data": {
        "new": true,
        "show_page": false,
        "status": "signedin",
        "users": [{
            "Michele": {
                "logo": "xyz.jpg",
                "status": "active",
                "active_since": 2015,
                "order": 1
            },
            "Gerry": {
                "logo": "xyz.jpg",
                "status": "active",
                "active_since": 2015,
                "order": 1
            }
        }]
    },
    "success": true
}

What you want is to access the users field of the data field of this body. So what you want is

userData.userslist().then(function(data){
    $scope.items = data.data.users;
    console.log($scope.items)
})

$scope. items is an array, not an object. You want to display the elements of this array. So the syntax is:

{{ user }}

Your JSON is awful, because each user is an object with a single field, and you have no way of knowing the name of that field. You'd better change it to

 "users": [
    {
         "name": "Michele",
         "logo": "xyz.jpg",
         "status": "active",
         "active_since": 2015,
         "order": 1
    },
    {
        "name": "Gerry",
        "logo": "xyz.jpg",
        "status": "active",
        "active_since": 2015,
        "order": 1
    }
]

That way you could just do:

<li ng-repeat="user in items">
   {{ user.name }}, active since {{ user.active_since }}.