jsonファイルから適切なデータを取得できませんAngularJS

Question

私は最初のAngularJSアプリケーションに問題があります。私はヨーマンジェネレータを使用しています。私は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：新しい

次の質問で未定義 のプロパティ「長さ」を読み取ることができませんです - どのように私は）以下のように（オブジェクトの配列効果を達成することができますか？

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

Answer 1

$http.getあなたはこのようなsuccess機能で出力にその結果を持っているのでasyncronous呼び出しです：

 $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機能に入れてください。あなたはそこからすべてを取得することができますので、私見あなただけの範囲にdataあるいはpersonsを割り当てる必要があり側の発言として

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

注意。何千もの無駄な変数をスコープに入れてしまうと、望ましくない複雑さが生じる可能性があります。