Can't get proper data from json file AngularJS

Question

I have problem with my first AngularJS app. I'm using yeoman generator. I need to get data from json file and check the length of array with objects.

My data.json file:

{"persons":[
    {  
         "firstname":"Christian",
         "lastname":"Bower",
         "age":21
      },
      {  
         "firstname":"Anthony",
         "lastname":"Martial",
         "age":25
      }
]}

My angular controller:

   'use strict';

        /**
         * @ngdoc function
         * @name webdevApp.controller:DataTableCtrl
         * @description
         * # DataTableCtrl
         * Controller of the webdevApp
         */
        angular.module('webdevApp')
          .controller('DataTableCtrl', function ($scope, $http) {
            this.awesomeThings = [
              'HTML5 Boilerplate',
              'AngularJS',
              'Karma'
            ];


            $http.get('../data.json').success(function(data){
                $scope.Data = data;
                $scope.namePerson = $scope.Data.persons[0].firstname;
            });

         console.log($scope.namePerson);
         console.log($scope.Data.length);
      });

Console output:

1) undefined

2) TypeError: Cannot read property 'length' of undefined at new

Next question is - How can I achieve effect as below (array with objects)?

$scope.persons = [
    { 
        "firstname": "christian", 
        "lastname": "bower", 
        "age": 21
    },
    { 
        "firstname": "anthony1", 
        "lastname": "martial", 
        "age": 25 
    }];

Alexander Kravets · Accepted Answer · 2016-05-30 20:52:04Z

2

$http.get is an asyncronous call so you have to output its results in the success function like this:

       $http.get('../data.json').success(function(data){
            $scope.Data = data;
            $scope.namePerson = $scope.Data.persons[0].firstname;

            console.log($scope.namePerson);
            console.log($scope.Data.length);

            $scope.persons = data.persons; // get your persons array
        });

answered May 30, 2016 at 20:52

Alexander Kravets

4,4351 gold badge19 silver badges15 bronze badges

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

4 Comments

XingD123 Over a year ago

Thank you! I have to do all operations inside .success function ? How can I use my variables outside ? .hasOwnProperty method will be the simplest way to count my array items?

Alexander Kravets Over a year ago

@XingD123, yes, whatever you do to your asynchronous call results - you do it in the success handler (meaning after the data is loaded). To get the number of array items use the length propery.

XingD123 Over a year ago

Ok, but if I need to do something like that $scope.getData = funcion () { $http.get().... } and later call my getData() function ? Is there another method to reach variables in whole script ?

XingD123 Over a year ago

Ok I have my answer. I'll use $.ajax() asynchronous.

C.Champagne · Accepted Answer · 2016-05-30 21:27:02Z

0

The $http.get call is asynchronous!

Put the logs in your success function.

$http.get('../data.json').success(function(data){
    $scope.Data = data;
    $scope.namePerson = $scope.Data.persons[0].firstname;

    //assign persons in scope
    $scope.persons = data.persons;

    //logs
    console.log($scope.namePerson);
    console.log($scope.Data.length);
});

Note as a side remark that IMHO you should only assign data or even personsin scope since you can get everything from there. Putting thousands of useless variables in scope can create unwanted complexity.

edited May 30, 2016 at 21:27

answered May 30, 2016 at 20:56

C.Champagne

5,5392 gold badges25 silver badges39 bronze badges

Collectives™ on Stack Overflow

Can't get proper data from json file AngularJS

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related