Angularjs $ Ressource arbeitet nicht mit einem Array, das von einer REST API zurückgegeben wird

Ich versuche angularjs zu lernen, und habe einen Block bei dem Versuch, zu einem von einer Rest API zurückgelieferten Array zu databinden. Ich habe eine einfache azurblaue API, die eine Reihe von Personenobjekten zurückgibt. Service-URL ist http://testv1.cloudapp.net/test.svc/persons.

Mein Controller-Code wie folgt aussieht:

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

Meine html wie folgt aussieht:

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

Frage: Die Tabelle in über HTML ist keine Daten angezeigt werden. Ich kann den Aufruf der API in Firebug sehen, und kann auch die JSON-Antwort von der API sehen. Was mache ich falsch, dass die Datenbindung zur REST API nicht funktioniert?

PS: JSFiddle dieses Problem zu demonstrieren ist: http://jsfiddle.net/jbliss1234/FBLFK/4/

Quelle

2013-03-31 John Bliss

Verwenden isArray param, wenn Sie Objekte verschachtelt haben:

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

als Sie container.object.property Notation verwenden können Objekte und deren Eigenschaften zugreifen.

Quelle

2013-03-31 06:30:13 Fanda

Der isArray-Parameter ist bereits vorhanden. Die Einstellung auf "True" oder "False" hat in diesem Fall keine Auswirkungen. Können Sie sich bitte die JSFiddle ansehen und beraten, was genau getan werden muss, um die Daten zu binden? Danke –

Um Arrays mit dem $ Resource Service zu behandeln, wird vorgeschlagen, dass Sie die Abfrage-Methode verwenden. Wie Sie unten sehen können, wurde die Abfragemethode für die Verarbeitung von Arrays entwickelt.

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

Der Code, den Sie, um dieses Array zu Ihrem Bereich verwenden sollten zurückzukehren

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

Dies setzt voraus, dass Ihr REST-API funktioniert und gibt einen Array zurück.

Für weiteren Lesekopf auf den docs

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

Quelle

2013-07-24 02:45:46 Gwash3189

nicht sicher, ob wir das gleiche Problem mit json und REST haben, aber diesen Beitrag mein Problem gelöst: array of strings not rendered correctly through angular resource

Quelle

2014-02-25 23:05:02

Ich wollte nur Quer schreiben meine Anpassung einer Lösung Aleksander auf einer anderen Frage Stackoverflow gab: https://stackoverflow.com/a/16387288/626810:

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

, wenn ich diese Funktion aufrufen:

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

Offensichtlich ist dies ein wenig sperrig, wenn Sie Arrays in mehreren Methoden/Ressourcen bekommen müssen, aber es scheint zu funktionieren.

Quelle

2014-03-18 21:17:36 Blaskovicz

transformResponse: Funktion (Daten, Header) { zurück {count: angular.fromJson (Daten)} } // funktioniert perfekt für mich. Vielen Dank! –

Das Array, das Sie vom Server erhalten, ist kein sauberes Array, hat aber einige zusätzliche Eigenschaften. Das macht ng-repeat nichts anzeigen, wenn Sie mit in über es iterieren.

Sie benötigen einen speziellen Iterator, um über das Array vom Server zu gehen, der diese zusätzlichen Eigenschaften ignoriert.So extrahieren Sie die Array-Daten durch forEach zuerst, wie folgt aus:

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

Dann können Sie tun

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

Quelle

2014-07-03 20:18:55 Magne

ich für mich ähnliches Problem und nicht der Antworten recht gearbeitet hatte, heres, was ich tat:

$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 + '}'))}; 
      } 
     } 
    });

Verwendet jquery. Im Grunde konvertieren Array zu Objekt, so angularjs Ressource kackt nicht seine Hosen.

Quelle

2016-03-08 20:42:04

Sorry, um JSON zu analysieren? Bitte nicht! Verwenden Sie JSON.parse! –

Angularjs $ Ressource arbeitet nicht mit einem Array, das von einer REST API zurückgegeben wird

Antwort

Verwandte Themen