Javascript 通过Angular Resources服务读取JSON

如何使用

angular resources.js

通过服务读取JSON文件

我正在开发一个非常基本的Angular应用程序，用于测试目的，现在我正在尝试从JSON文件中读取数据。我将这段代码放在一个服务中，这样当我们移动一个基于服务器的数据存储时，我就可以更容易地将它替换掉

我的

App

和

App.controller

声明如下：

'use strict';

// create module for custom directives
var App = angular.module('App', ['jsonService']);

// controller business logic
App.controller('AppCtrl', function AppCtrl($scope, JsonService) {
    console.log("marker 1");

    if (!$scope.jsonData) {
        console.log("marker 2");
        JsonService.getData(function (d) {
            console.log(d);
            $scope.jsonData = d;
            $scope.records = d.length;
        });
    } else {
        console.log("I have data already... " + $scope.jsonData);
    }

    console.log($scope.jsonData);
});

目前，我的

JsonService

定义如下：

'use strict';

angular.module('jsonService', ['ngResource'])
.factory('JsonService', function($resource, $filter) {
    // define the remote service using Angular's $resource module
    var service = $resource('/data/ProcessModeling-Resources.json', {});

    var JsonService = {
        // calls $resource.query() to retrieve the remote data.
        getData : function getData(callback) {
            console.log("marker 3");
            service.query(function (data) {
                console.log("marker 4");
            });
        }
    };

    return JsonService;
});

我得到的控制台输出如下：

marker 1 app.js:8
marker 2 app.js:11
marker 3 services.js:13
undefined app.js:21
TypeError: Object #<Resource> has no method 'push'
    at copy (http://127.0.0.1:8000/lib/angular.js:556:21)
    at new Resource (http://127.0.0.1:8000/lib/angular-resource.js:330:9)
    at http://127.0.0.1:8000/lib/angular-resource.js:386:32
    at forEach (http://127.0.0.1:8000/lib/angular.js:117:20)
    at http://127.0.0.1:8000/lib/angular-resource.js:385:19
    at wrappedCallback (http://127.0.0.1:8000/lib/angular.js:6650:59)
    at http://127.0.0.1:8000/lib/angular.js:6687:26
    at Object.Scope.$eval (http://127.0.0.1:8000/lib/angular.js:7840:28)
    at Object.Scope.$digest (http://127.0.0.1:8000/lib/angular.js:7707:25)
    at Object.Scope.$apply (http://127.0.0.1:8000/lib/angular.js:7926:24) angular.js:5582

marker 1 app.js:8
marker 2 app.js:11
marker 3 services.js:13
未定义的app.js:21
TypeError:对象#没有方法“推送”
抄袭(http://127.0.0.1:8000/lib/angular.js:556:21)
新资源(http://127.0.0.1:8000/lib/angular-参考资料：js:330:9）
在http://127.0.0.1:8000/lib/angular-参考资料：js:386:32
在弗雷赫(http://127.0.0.1:8000/lib/angular.js:117:20)
在http://127.0.0.1:8000/lib/angular-参考资料：js:385:19
在wrappedCallback(http://127.0.0.1:8000/lib/angular.js:6650:59)
在http://127.0.0.1:8000/lib/angular.js:6687:26
在Object.Scope.$eval(http://127.0.0.1:8000/lib/angular.js:7840:28)
位于Object.Scope.$digest(http://127.0.0.1:8000/lib/angular.js:7707:25)
在Object.Scope.$apply(http://127.0.0.1:8000/lib/angular.js:7926:24)www.js:5582

当我试图调用我的

service.query（函数（数据）{}

）时，我收到了我的错误，如果我理解正确的话，它应该是我的JSON文件

---

我一直在用它作为提取数据的示例。

我会遵循@pkozlowski的建议，并确保响应是一个数组。无论如何，这里有一个示例，它从JSON文件加载数据，类似于您在注释中描述的内容。它使用ngResource，可以帮助您将内容组合在一起：

服务

angular.module('jsonService', ['ngResource'])
.factory('JsonService', function($resource) {
  return $resource('cats.json',{ }, {
    getData: {method:'GET', isArray: false}
  });
});

请注意，

isArray

设置为

false

你的应用程序和控制器

var app = angular.module('app', ['jsonService']);

app.controller('ctrl', function($scope, JsonService){
  JsonService.getData(function(data){
    $scope.name = data.name;
    $scope.children = data.children;
  });
});

getData

实际上是不需要的，因为资源类为您提供了一些有用的方便方法，例如

get

，您可以这样做

angular.module('jsonService', ['ngResource'])
.factory('JsonService', function($resource) {
  return $resource('cats.json');
});

app.controller('ctrl', function($scope, JsonService){
  JsonService.get(function(data){
    $scope.name = data.name;
    $scope.children = data.children;
  });
});

---

我假定文件中的数据不是query（）方法所需的数组。

数据

是一个

对象

。它有两个字段：{'name'：'Resources'，'children'：[…]}.那里有一个数组…这会引起我的痛苦吗？是的，响应需要是一个数组，顶级的，而不是封装在一个对象中。谢谢@jm-。我还是花了一点时间才弄明白，但我明白了！我仍然想知道-

get

和

query

是一样的，只是

query

需要一个数组，而le

get

不是吗？它们在某种意义上是相似的，它们都发出

get

请求，但是您

get

一个资源

{}

和

query

多个资源

[{}，{}]

完美；我现在就明白了！谢谢！