wake-up-neo.com

Angularjs $ - Ressource funktioniert nicht mit einem von a zurückgegebenen Array REST API

Ich versuche, anglejs zu lernen, und habe beim Versuch, eine Datenverbindung zu einem von einer Rest-API zurückgegebenen Array herzustellen, einen Block getroffen. Ich habe eine einfache Azure-API, die ein Array von Personenobjekten zurückgibt. Service-URL ist http://testv1.cloudapp.net/test.svc/persons . 

Mein Controller-Code sieht folgendermaßen aus: 

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 sieht so aus:

<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 der obigen HTML-Datei zeigt keine Daten an. Ich kann den Aufruf der API in Firebug sehen und auch die JSON-Antwort von der API. Was mache ich falsch, was dazu führt, dass die Datenbindung an das REST api nicht funktioniert?

PS: JSFiddle, das dieses Problem demonstriert, ist unter: http://jsfiddle.net/jbliss1234/FBLFK/4/

angularjsangularjs-ng-repeat
14
John Bliss

Um Arrays mit dem $ resource-Dienst zu behandeln, wird empfohlen, dass Sie die Abfragemethode 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 verwenden sollten, um dieses Array in Ihren Bereich zurückzugeben, lautet 

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 Ihre REST - API funktioniert und ein Array zurückgibt. 

Weitere Informationen finden Sie in den Dokumenten

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

28
Gwash3189

Ich wollte nur meine Anpassung einer Lösung übermitteln, die Aleksander zu einer anderen Stackoverflow-Frage 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 also diese Funktion aufrufe:

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 benötigen, aber es scheint zu funktionieren.

10
Blaskovicz

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

Dann können Sie die container.object.property-Notation verwenden, um auf Objekte und deren Eigenschaften zuzugreifen.

6
Fanda

Nicht sicher, ob wir dasselbe Problem mit Json und REST haben, aber dieser Beitrag hat mein Problem gelöst: Array von Zeichenfolgen, die nicht korrekt durch die Winkelressource gerendert werden []

0
Tony Z

Das Array, das Sie vom Server zurückerhalten, ist kein sauberes Array, weist jedoch einige zusätzliche Eigenschaften auf. Das bedeutet, dass ng-repeat nichts anzeigt, wenn Sie mit in darüber iterieren.

Sie benötigen einen speziellen Iterator, um das Array vom Server durchzugehen, wodurch diese zusätzlichen Eigenschaften ignoriert werden. Extrahieren Sie also zuerst die Daten des Arrays durch forEach wie folgt:

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

Dann kannst du es tun

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

Ich hatte ein ähnliches Problem und keine der Antworten funktionierte für mich, hier habe ich getan:

    $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. Konvertieren Sie das Array grundsätzlich in ein Objekt, sodass die Hose nicht von der eckigen Ressource gekackt wird.

0
Brayden Hancock