Angularjs $資源無法與從REST API返回的數組一起工作

我正在嘗試學習angularjs，並試圖將數據綁定到從Rest API返回的數組中。我有一個簡單的azure API返回一個人物對象的數組。服務網址是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/

來源

2013-03-31 John Bliss

使用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標記訪問對象和它的屬性。

來源

2013-03-31 06:30:13 Fanda

isArray參數已經存在。在這種情況下將其設置爲true或false不起作用。你可以看看jsfiddle，並建議究竟需要做什麼才能獲得數據綁定。謝謝 –

爲了使用$ resource服務處理數組，建議您使用查詢方法。正如你在下面看到的，查詢方法是爲了處理數組而構建的。

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

來源

2013-07-24 02:45:46 Gwash3189

不知道，如果我們有與JSON和REST同樣的問題，但這篇文章解決了我的問題：array of strings not rendered correctly through angular resource

來源

2014-02-25 23:05:02

只是想解決亞歷山大給了另一個計算器問題的交叉後我的適應：https://stackoverflow.com/a/16387288/626810：

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

顯然，這如果你需要得到陣列在多個方法/資源，但它似乎工作有點笨重。

來源

2014-03-18 21:17:36 Blaskovicz

transformResponse：函數（數據，標題）{ return {count：angular.fromJson（data）} } //對我來說非常完美。謝謝！ –

您從服務器中取回的數組不是乾淨的數組，但具有一些額外的屬性。這使得ng-repeat使用in迭代它時不會顯示任何內容。

您需要一個特殊的迭代器才能從服務器檢查數組，這將忽略這些額外的屬性。因此，通過forEach提取陣列數據首先，像這樣：

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

然後，你可以做

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

來源

2014-07-03 20:18:55 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資源不會拖垮它的褲子。

來源

2016-03-08 20:42:04

對不起，解析JSON？請不要！使用JSON.parse！ –

Angularjs $資源無法與從REST API返回的數組一起工作

回答

相關問題