Unable to retrieve JSON data from an AngularJS array

Question

Unable to retrieve JSON data from an AngularJS array

I have successfully received a json object containing query results from the database. However, I am currently facing an issue where I am unable to access the returned json data one by one.

When I check the console.log, this is what it shows: https://i.sstatic.net/KHuz0.png

This is my Angular code:

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

Whenever I try to use

console.log($scope.peopleList[0]);

, it keeps showing as undefined. How can I access the data to print it using ng-repeat?

javascript angularjs json angular-http

Answer 1

Answer №1

Give this code a shot:

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

Then, implement it like this using ng-repeat

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

Answer 2

Give this code a shot:

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

Then, implement it like this using ng-repeat

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

Answer 3

Answer №2

Upon careful observation :

Since response.data is already in the form of an array of objects, there is no requirement to push it into a separate array.

You can directly assign

$scope.peopleList = response.data

instead of using

$scope.peopleList.push(response.data)

If you wish to access the first object from the array, you can simply use

console.log($scope.peopleList[0])

to retrieve the desired output.

DEMONSTRATION

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>

Answer 4

Upon careful observation :

Since response.data is already in the form of an array of objects, there is no requirement to push it into a separate array.

You can directly assign

$scope.peopleList = response.data

instead of using

$scope.peopleList.push(response.data)

If you wish to access the first object from the array, you can simply use

console.log($scope.peopleList[0])

to retrieve the desired output.

DEMONSTRATION

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>

Unable to retrieve JSON data from an AngularJS array

Answer №1

Answer №2

Similar questions

The jQuery dialog dropdown list fails to display on subsequent attempts

Avoid Empty Values in Converted Array

What may be causing the lag in the translation within ThreeJS?

Is there a more streamlined approach to coding in PHP and jQuery?

Is there a way to configure nodemon to automatically monitor changes in dotenv-flow files?

Managing AJAX Requests in AngularJS

Is the performance impacted by using try / catch instead of the `.catch` observable operator when handling XHR requests?

What is the best way to implement my function on every value in a JSON file?

What does the Problum Unexpected number in JSON at position 13 signify?

Using Python to transform a nested dictionary list into a Pandas Dataframe

Tips for adding a JSON object to a JSON array in Python

It is impossible to resolve Npm vulnerabilities

Angularent ng-include backup plan

What is the best way to prevent users from clearing the value attribute of an input element?

Assign a variable to the result of ajax that remains unchanged until it is specifically invoked

Handling JQuery AJAX HTML responses in the error callback function

Disable the default page scrolling behavior when collapsing an accordion section in Bootstrap 4 framework

Issue with Date.js: Date.monday() function is not functioning as expected

Is it possible for my website to send an email without the need for a script to be executed?

Node.js program closes immediately upon Java startup