Угловая служба $ http не загружает файл json

Question

Привет, угловые эксперты!

Я использовал эту настраиваемую директиву для таблицы (implementation), но когда я пытаюсь использовать загрузку $ http service, что json-массив из файла, json не загружается в $ scope.items, я начинающий в угловом и достаточно продвинуть javascript, таким образом, мне нужна помощь от вас.

инициализации контроллера

fessmodule.controller('ptiListController', function($http, $scope, $filter) { 

$ HTTP вызова службы

$http.get('data/ptis/ptis.json').then(function(response) { 
      $scope.items = response.data; 
     } 
    ); 

браузер консоли ошибка

TypeError: Cannot read property 'length' of undefined 
at Scope.$scope.groupToPages (http://localhost:8000/app/modules/app/phone/scripts/pti-list-controller.js:75:49) 
at Scope.$scope.search (http://localhost:8000/app/modules/app/phone/scripts/pti-list-controller.js:68:16) 
at new <anonymous> (http://localhost:8000/app/modules/app/phone/scripts/pti-list-controller.js:117:12) 
at invoke (http://localhost:8000/app/lib/js/angular.js:4185:17) 
at Object.instantiate (http://localhost:8000/app/lib/js/angular.js:4193:27) 
at http://localhost:8000/app/lib/js/angular.js:8462:28 
at link (http://localhost:8000/app/lib/js/angular-route.js:975:26) 
at invokeLinkFn (http://localhost:8000/app/lib/js/angular.js:8219:9) 
at nodeLinkFn (http://localhost:8000/app/lib/js/angular.js:7729:11) 
at compositeLinkFn (http://localhost:8000/app/lib/js/angular.js:7078:13) <div ng-view="" class="ng-scope"> 

так, что я изменился с скрипку:

в вместо:

$scope.items = [ 
    {"id":1,"name":"name 1","description":"description 1","field3":"field3 1","field4":"field4 1","field5 ":"field5 1"}, 
    {"id":2,"name":"name 2","description":"description 1","field3":"field3 2","field4":"field4 2","field5 ":"field5 2"}, 
    {"id":3,"name":"name 3","description":"description 1","field3":"field3 3","field4":"field4 3","field5 ":"field5 3"} 
]; 

я изменил к этому:

$http.get('data/ptis/ptis.json').then(function(response) { 
      $scope.items = response.data; 
     } 
    ); 

, а также, я попытался с помощью вызова службы, как:

$http.get('data/ptis/ptis.json').success(function(data) { 
     $scope.items = data; 
    }); 

и получил такое же поведение.

Спасибо заранее!

Answer 1

Я считаю, вы используете $http.get неправильно. Попробуйте $http.JSONP эту модель:

$scope.items = {}; // <-- initialize empty object 

$http.jsonp('/someJSONUrl'). 
    success(function(data) { 
    // this callback will be called asynchronously 
    // when the response is available 
    $scope.items = data; // <-- fill object with data 
    }); 

Вы не можете использовать $scope.items, прежде чем она имеет некоторые данные. Вот почему вы должны инициализировать его первым, так как пустой объект/массив затем заполнить его данными и angular магии должна делать все остальное :)

Answer 2

Я просто сделать что-то вроде этого, как упоминание в document и его работе:

 $http.get('someUrl'). 
     success(function(data, status, headers, config) { 
     // this callback will be called asynchronously 
     // when the response is available 
     }). 
     error(function(data, status, headers, config) { 
     // called asynchronously if an error occurs 
     // or server returns response with an error status. 
     }); 

Вот образец:

angular.module('myApp', []) 
 
    .controller('JustCtrl', function($scope, $http) { 
 
    $scope.ptis = []; 
 
    // Simple GET request example : 
 
    $http.get('https://gist.githubusercontent.com/idhamperdameian/239cc5a4dbba4488575d/raw/0a2ea4c6c120c9a8f02c85afcf7a31941ef74d3a/ptis.json'). 
 
    success(function(data, status, headers, config) { 
 
     // this callback will be called asynchronously 
 
     // when the response is available 
 
     $scope.ptis = data; 
 
    }). 
 
    error(function(data, status, headers, config) { 
 
     // called asynchronously if an error occurs 
 
     // or server returns response with an error status. 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="JustCtrl"> 
 
    <span ng-repeat="p in ptis"> 
 
     {{p.name}}, {{p.description}}, etc...<br> 
 
    </span> 
 
</div>

Или вы можете пр efer до this demo.