無法從json文件AngularJS獲取正確的數據

Question

我的第一個AngularJS應用有問題。 我正在使用yeoman生成器。 我需要從json文件中獲取數據，並檢查帶有對象的數組的長度。

我的data.json文件：

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

我的角度控制器：

   '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);
      });

控制台輸出：

1） 未定義

2）TypeError：無法讀取未定義的新屬性'length'

下一個問題是-如何實現如下效果（帶有對象的數組）？

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

Answer 1

$http.get是一個異步調用，因此您必須在success函數中輸出其結果，如下所示：

       $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
        });

Answer 2

$http.get調用是異步的 ！

將日志放入success功能中。

$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);
});

注意，恕我直言，恕我直言，您應該只分配data甚至是范圍內的persons ，因為您可以從那里獲取所有信息。 將數千個無用的變量放在范圍內會產生不必要的復雜性。