angular.forEach() not working

Question

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 1

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 }}.

Answer 2

use this

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.users[0], function(item){
                   $scope.items.push(item);
               })
    console.log($scope.items)
  })
}]);

you were iterating over data and not on users.