通过角资源服务阅读JSON [英] Reading in JSON through Angular Resources Service

问题描述

如何使用角resources.js 通过服务于JSON文件中读取？

How can I use angular-resources.js to read in a JSON file through a service?

我工作的用于测试目的一个非常基本的应用角度和我只是想从JSON文件中的数据，现在读。我把这个code在服务，所以我可以更容易地将其交换出去，当我们移动基于服务器的数据存储。

I am working on a very basic Angular app for testing purposes and am just trying to read in data from JSON file right now. I am placing this code in a service so I can more easily swap it out when we move a server based data store.

我的应用和 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;
});

控制台输出我得到如下：

The console output I am getting follows:

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

我收到我的错误，当我试图打电话给我 service.query（功能（数据）{} ，它（如果我理解正确）应拉我的JSON文件

I'm receiving my error when I attempt to call my service.query(function (data) { }, which (if I'm understanding correctly) should be pulling my JSON file in.

我一直在使用 AngularJS猫应用作为提取数据的例子。

I've been using AngularJS Cats App as an example for pulling data.

推荐答案

我会关注@ pkozlowski的意见，并确保响应是一个数组。总之，这里是从一个JSON数据加载文件类似于您在您的意见描述一下一个例子。它使用的 ngResource 并可以帮你把东西放在一起：<一href=\"http://plnkr.co/edit/Ofq7Md8udEnIhAPF1NgL?p=$p$pview\">http://plnkr.co/edit/Ofq7Md8udEnIhAPF1NgL?p=$p$pview

I'd follow @pkozlowski's advice and make sure the response is an array. Anyway, here's an example that loads data from a JSON file similar to what you describe in your comments. It uses ngResource and can help you put things together: http://plnkr.co/edit/Ofq7Md8udEnIhAPF1NgL?p=preview

服务

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

注意 IsArray的设置为假。

您的应用程序和控制器

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 ，你可以做到这一点。

getData is actually not needed since the Resource class gives you some useful convenience methods such a get, you can just do this

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

这篇关于通过角资源服务阅读JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！