2016-04-21 5 views
2

Ich benutze eine REST-Architektur auf dem Backend mit CakePHP 3, die ein JSON-Array mit diesem Format nach Firebug zurückgibt, es ist ein 200 OK, mit dieser Antwort:ng-Wiederholung zeigt keine Liste von JSON-Array in AngularJS 1.5, aber ich kann Werte einzeln sehen

{ 
    "recipes": [ 
     { 
      "id": 0, 
      "name": "modificadodsadasdas" 
     }, 
     { 
      "id": 1, 
      "name": "dasdasdasdasdas" 
     } 
    ] 
} 

Meine Datei index.html:

<html> 
<head> 

</head> 
<body ng-app="AppRecetas"> 
    <div ng-controller="RecetasCtrl"> 
    <ul ng-repeat="recipe in recipes"> 
     <li>{{recipe.name}}</li> 
    </ul> 
</div> 
<script src="js/angular.min.js"></script> 
<script src="js/consumidor_rest.js"></script> 
</body> 
</html> 

Und meine consumidor_rest.js, die die Daten von der REST-Webservice bringt (die auf demselben Server befindet):

var app = angular.module("AppRecetas", []); 

app.controller("RecetasCtrl", function($scope, $http) { 
    $http.get('http://localhost/services/recipes/index.json'). 
    success(function(data, status, headers, config) { 
     $scope.recipes = data; 
    }). 
    error(function(data, status, headers, config) { 
     // log error 
    }); 
}); 

Die Konsole von Firebug zeigt keine Fehler und der Ajax-Aufruf ist korrekt mit der richtigen Antwort. Aber die ng-Wiederholung zeigt nur einen einzelnen Punkt der ul ohne Wert. Wenn ich innerhalb des ng-Repeats verwende:

Ich kann das erste Element korrekt angezeigt sehen. Was läuft falsch ?. Ich denke, es ist ein Problem mit, wie das Array von CakePHP geliefert wird, aber ich bin mir nicht sicher ...

+1

zu 'data.recipes' Einstellung' $ scope.recipes' Versuchen. – Kyle

+0

müssen Sie sehen, was Sie als Antwort bekommen .. –

Antwort

2

Überprüfen der Daten widersprechen, dass Ihr aus dem http Anruf bekommen ich denke, Ihre Datenobjekt ist das JSON-Objekt und die "recipes" -Eigenschaft innerhalb des Objekts ist Ihr Array. Daher sollten Sie Ihre $ scope.recipes = data auf $scope.recipes = data.recipes.

ändern Für die Überprüfung der Datenobjekt in Ihrem UI Druck etwas wie folgt aus:

{{ $scope.recipes | json }} 
+0

Danke, diese Zeile löste es ...... Jetzt werden die Ergebnisse korrekt angezeigt – Juan

0

Ich denke, Ihr http-Aufruf gibt die Daten in einem anderen Objekt (ich vermute response.data, in Ihr Fall: $ scope.recipes = data.data;

Edit:.. nur Ihre Rückkehr Daten aus dem hTTP-Aufruf console.log

2

Das Problem könnte sein, dass das Objekt nicht in Propper Objekte gedreht werden. Vielleicht möchten Sie versuchen, sie in JSON-Objekte zu drehen, etwa so:

for(var i = 0; i < recipes.length; i++){ 
    recipesArray.push(JSON.parse(recipes[i])); 
} 
$scope.recipes = recipesArray; 

Und dann in der Ansicht

<ul ng-repeat="recipe in recipes"> 
    <li>{{recipe.name}}</li> 
</ul>