Unable to access json data in angularjs array

Question

I've successfully returned a json object which has query results from database. I'm unable to access the returned json one by one.

Here's what the console.log shows:

Angular code:

$scope.peopleList=[];
            $http.get("http://localhost/project/public/people_names").then(function(response) {
                $scope.peopleList.push(response.data);
            });
            console.log($scope.peopleList);

if I use console.log($scope.peopleList[0]);, it says undefined. How do I access it to print it using ng-repeat

Answer 1

Try below code :

$scope.peopleList=[];
$http.get("http://localhost/project/public/people_names")
  .then(function(response) {
     $scope.peopleList = response.data;
     console.log($scope.peopleList);
  });

And use like below with ng-repeat

<div ng-repeat='person in peopleList track by person.id'>
  ....
</div>

Answer 2

Some observations :

• As response.data is already an array of objects. So, no need to push it again into the different array.
• You can directly use $scope.peopleList = response.data instead of $scope.peopleList.push(response.data)

Now, if you try to access the first object from an array you can use console.log($scope.peopleList[0]) it will provide you the expected results.

DEMO

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

myApp.controller('MyCtrl', function($scope) {
    $scope.peopleList = [{
      id: 5, 
      name:"Raman"
    },
    {
      id: 7, 
      name:"Komal"
    }];
    console.log($scope.peopleList[0]);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
</div>