Не удается получить правильные данные из json-файла. AngularJS

У меня проблема с моим первым приложением AngularJS. Я использую генератор йома. Мне нужно получить данные из json-файла и проверить длину массива с объектами.Не удается получить правильные данные из json-файла. AngularJS

Мой файл 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 
    }];

источник

2016-05-30 XingD123

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

источник

2016-05-30 20:52:04

Спасибо! Я должен выполнять все операции внутри функции .success? Как использовать внешние переменные? Метод .hasOwnProperty будет самым простым способом подсчета элементов массива? – XingD123

@ XingD123, да, что бы вы ни делали с результатами асинхронного вызова - вы делаете это в обработчике 'success' (что означает, что после загрузки данных). Чтобы получить количество элементов массива, используйте свойство 'length'. –

Хорошо, но если мне нужно сделать что-то вроде этого $ scope.getData = funcion() {$ http.get() ....}, а затем вызвать функцию getData()? Есть ли другой способ охватить переменные всего скрипта? – XingD123

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

Примечание как побочное замечание, что IMHO следует назначать только data или даже persons в объеме, так как вы можете получить все оттуда. Помещение тысяч бесполезных переменных в область видимости может создать нежелательную сложность.

источник

2016-05-30 20:56:34

Не удается получить правильные данные из json-файла. AngularJS

ответ

Смежные вопросы