Angular $http 服务不加载 json 文件

Angular $http service does not load json file

本文关键字：加载 json 文件 服务 http Angular      更新时间：2023-09-26

你好角度专家！

我将这个自定义指令用于表（实现），但是当我尝试使用$http服务从文件中加载该 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;
    });

并得到了相同的行为。

提前谢谢你！

我相信

你用错了$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魔法应该完成剩下的:)

我只是按照文档中提到的方式做这样的事情，它起作用了：

      $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>

或者您可能更喜欢此演示。

相关文章：