Angularjs $resource 不适用于从 REST API 返回的数组 [英] Angularjs $resource not working with an array returned from a REST API

查看：15 发布时间：2021/11/28 17:11:06 angularjs angularjs-ng-repeat

本文介绍了Angularjs $resource 不适用于从 REST API 返回的数组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试学习 angularjs，并且在尝试将数据绑定到从 Rest API 返回的数组时遇到了障碍.我有一个简单的 azure api 返回一组人员对象.服务 URL 是 http://testv1.cloudapp.net/test.svc/persons.

我的控制器代码如下:

angular.module("ToDoApp", ["ngResource"]);函数 TodoCtrl($scope, $resource) {$scope.svc = $resource('http://testv1.cloudapp.net/test.svc/persons', {回调:'JSON_CALLBACK'}, {得到: {方法:'JSONP'，isArray: 真}});$scope.items = $scope.svc.get();$scope.msg = "你好世界";}

我的 html 看起来像:

<头></头><身体><div ng-app="ToDoApp"><div ng-controller="TodoCtrl"><h1>{{msg}}</h1><table class="table table-striped table-condensed table-hover"><头><th>电子邮件</th><th>名字</th><th>Last Name</th></thead><tr ng-repeat="项目中的项目"><td>{{item.Email}}</td><td>{{item.FirstName}}</td><td>{{item.LastName}}</td></tr></tbody>

问题:上面的 html 中的表格没有显示任何数据.我可以在Firebug中看到对api的调用，也可以看到来自api的JSON响应.我做错了什么导致对 REST api 的数据绑定不起作用?

PS:JSFiddle 演示此问题位于:http://jsfiddle.net/jbliss1234/FBLFK/4/

解决方案

为了使用 $resource 服务处理数组，建议您使用查询方法.正如您在下面看到的，查询方法是为处理数组而构建的.

{ 'get': {method:'GET'},'保存':{方法:'POST'}，'查询':{方法:'GET'，isArray:true}，'删除':{方法:'删除'}，'删除':{方法:'删除'}}；

为了将此数组返回到您的作用域，您应该使用的代码是

angular.module("ToDoApp", ["ngResource"]);函数 TodoCtrl($scope, $resource) {var svc = $resource('http://testv1.cloudapp.net/test.svc/persons');$scope.items = svc.query();$scope.msg = "你好世界";}

这假设您的 REST API 正在运行并将返回一个数组.

如需进一步阅读，请前往文档

http://docs.angularjs.org/api/ngResource.$resource

I am trying to learn angularjs, and have hit a block in trying to databind to an array returned from a Rest API. I have a simple azure api returning an array of person objects. Service url is http://testv1.cloudapp.net/test.svc/persons.

My controller code looks like:

angular.module("ToDoApp", ["ngResource"]);
function TodoCtrl($scope, $resource) {
$scope.svc = $resource('http://testv1.cloudapp.net/test.svc/persons', {
    callback: 'JSON_CALLBACK'
}, {
    get: {
        method: 'JSONP',
        isArray: true
    }
});
$scope.items = $scope.svc.get();
$scope.msg = "Hello World";
}

My html looks like:

<html>
<head></head>
<body>
<div ng-app="ToDoApp">
    <div ng-controller="TodoCtrl">
         <h1>{{msg}}</h1>

        <table class="table table-striped table-condensed table-hover">
            <thead>
                <th>Email</th>
                <th>First Name</th>
                <th>Last Name</th>
            </thead>
            <tbody>
                <tr ng-repeat="item in items">
                    <td>{{item.Email}}</td>
                    <td>{{item.FirstName}}</td>
                    <td>{{item.LastName}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

Question: The table in above html is not displaying any data. I can see the call to the api in Firebug, and can also see the JSON response from the api. What am I doing incorrectly that is causing the databinding to the REST api not work?

PS:JSFiddle demonstrating this issue is at: http://jsfiddle.net/jbliss1234/FBLFK/4/

解决方案

In order to handle arrays with the $resource service, it's suggested that you use the query method. As you can see below, the query method is built to handle arrays.

{ 'get':    {method:'GET'},
  'save':   {method:'POST'},
  'query':  {method:'GET', isArray:true},
  'remove': {method:'DELETE'},
  'delete': {method:'DELETE'} };

The code you should use in order to return this array to your scope is

angular.module("ToDoApp", ["ngResource"]);

function TodoCtrl($scope, $resource) {
    var svc = $resource('http://testv1.cloudapp.net/test.svc/persons');
    $scope.items = svc.query();
    $scope.msg = "Hello World";
}

This assumes that your REST API is working and will return an array.

For further reading head to the docs

http://docs.angularjs.org/api/ngResource.$resource

这篇关于Angularjs $resource 不适用于从 REST API 返回的数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

Angularjs $resource 不适用于从 REST API 返回的数组 [英] Angularjs $resource not working with an array returned from a REST API

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

Angularjs $resource 不适用于从 REST API 返回的数组 [英] Angularjs $resource not working with an array returned from a REST API

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭