web-dev-qa-db-ja.com

Angularjs $ resourceがREST APIから返された配列で機能しない

私はangularjsを学ぼうとしていますが、Rest APIから返された配列にデータバインドしようとしてブロックにぶつかっています。 Personオブジェクトの配列を返す単純なAzure APIがあります。サービスのURLは http://testv1.cloudapp.net/test.svc/persons です。

私のコントローラーコードは次のようになります：

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

私のhtmlは次のようになります：

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

質問：上記のHTMLの表にデータが表示されていません。 FirebugでAPIの呼び出しを確認でき、APIからのJSON応答も確認できます。 REST apiへのデータバインディングが機能しない原因となっている私が間違って何をしていますか？

PS：JSFiddleがこの問題を示しています： http://jsfiddle.net/jbliss1234/FBLFK/4/

angularjsangularjs-ng-repeat
14
John Bliss

$ resourceサービスで配列を処理するには、queryメソッドを使用することをお勧めします。以下に示すように、クエリメソッドは配列を処理するために構築されています。

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

この配列をスコープに戻すために使用する必要があるコードは次のとおりです。

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

これは、REST APIが機能しており、配列を返すことを前提としています。

ドキュメントをさらに読むには

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

28
Gwash3189

Aleksanderが別のstackoverflow質問に与えた解決策の私の適応をクロスポストしたかっただけです https://stackoverflow.com/a/16387288/62681 ：

methodName: {method:'GET', url: "/some/location/returning/array", transformResponse: function (data) {return {list: angular.fromJson(data)} }}

したがって、この関数を呼び出すと：

var tempData = ResourceName.methodName(function(){
  console.log(tempData.list); // list will be the array in the expected format
});

複数のメソッド/リソースで配列を取得する必要がある場合、明らかにこれは少しかさばりますが、動作するようです。

10
Blaskovicz

オブジェクトがネストされている場合は、isArray paramを使用します。

angular.module('privilegeService', ['ngResource']).
factory('Privilege', function ($resource) {
    return $resource('api/users/:userId/privileges', 
                     {userId: '@id'}, 
                     {'query':  {method:'GET', isArray:false}});
});

container.object.property表記を使用して、オブジェクトとそのプロパティにアクセスできます。

6
Fanda

JsonとRESTで同じ問題が発生しているかどうかはわかりませんが、この投稿は私の問題を解決しました： 文字列の配列がangular resource によって正しくレンダリングされない）

0
Tony Z

サーバーから取得した配列はクリーンな配列ではありませんが、いくつかの追加プロパティがあります。それはng-repeatinを使用して反復しても何も表示されません。

これらの余分なプロパティを無視する、サーバーからの配列を調べるには、特別なイテレーターが必要です。したがって、次のように、最初にforEachを介して配列データを抽出します。

$scope.items = []
var response = $scope.svc.get();
angular.forEach(response, function(item) {
  $scope.items.Push(item);
});

その後、あなたは行うことができます

<tr ng-repeat="item in items">
0
Magne

私は同様の問題を抱えていて、答えのどれも私にとってはうまくいきませんでした、私がしたことは次のとおりです：

    $resource("/", {}, {
       query: {
            method: 'GET',
            isArray: false,
            transformResponse: function (data, headers) {
                //if no data return so no warnings
                if (data == ''){
                    return;
                }

                return {data: $.extend({}, eval("{" + data + '}'))};
            }
        }
   });

Jqueryを使用します。基本的に、配列をオブジェクトに変換して、angularjsリソースがズボンをうんざりさせないようにします。

0
Brayden Hancock