ng-repeat 未在 AngularJS 1.5 中显示 JSON 数组列表，但我可以单独查看值 [英] ng-repeat not showing list of JSON array in AngularJS 1.5, but I can see values individually
问题描述
我正在使用 CakePHP 3 的后端使用 REST 架构，它根据 firebug 返回具有此格式的 JSON 数组，结果为 200 OK，并带有此响应:
<代码> {食谱":[{身份证":0，"name": "modificadodsadasdas"},{身份证":1，"name": "dasdasdasdasdas"}]}我的 index.html 文件:
<头><body ng-app="AppRecetas"><div ng-controller="RecetasCtrl"><ul ng-repeat="食谱中的食谱"><li>{{recipe.name}}</li><script src="js/angular.min.js"></script><script src="js/consumidor_rest.js"></script></html>
还有我的 consumidor_rest.js，它从 REST 网络服务(在同一台服务器上)获取数据:
var app = angular.module("AppRecetas", []);app.controller("RecetasCtrl", function($scope, $http) {$http.get('http://localhost/services/recipes/index.json').成功(功能(数据，状态，标题，配置){$scope.recipes = 数据；}).错误(功能(数据，状态，标题，配置){//记录错误});});firebug 的控制台没有显示任何错误，ajax 调用是正确的，响应正确.但是 ng-repeat 只是显示了一个没有价值的 ul 点.如果我在 ng-repeat 中使用:
{{recipe[0].name}} 我可以看到第一个元素正确显示.怎么了?.我猜是 cakePHP 传递数组的方式有问题，但我不确定......
检查您从 http 调用中获得的数据对象.我认为您的数据对象是 JSON 对象，对象内的食谱"属性是您的数组.因此，请考虑将您的 $scope.recipes = data 更改为$scope.recipes = data.recipes.
为了验证 UI 中的数据对象，请打印如下内容:
{{ $scope.recipes |json }}I'm using a REST architecture on the backend using CakePHP 3 that returns a JSON Array with this format according to firebug, it's a 200 OK, with this response:
{
"recipes": [
{
"id": 0,
"name": "modificadodsadasdas"
},
{
"id": 1,
"name": "dasdasdasdasdas"
}
]
}
My index.html file:
<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>
And my consumidor_rest.js that brings the data from the REST webservice(which is on the same server):
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
});
});
The console of firebug doesn't show any errors and the ajax call is correct with the correct response. But the ng-repeat is just showing one single dot of the ul with no value. If I use inside the ng-repeat:
<li>{{recipe[0].name}}</li>
I can see the first element displayed correctly. What's going wrong?. I guess it's a problem with how the array is being delivered by cakePHP, but I'm not sure......
Check the data object that your are getting from the http call. I think your data object is the JSON object and the "recipes" property inside the object is your array. So consider changing your $scope.recipes = data to
$scope.recipes = data.recipes.
For verifying the data object in your UI print something like this:
{{ $scope.recipes | json }}
这篇关于ng-repeat 未在 AngularJS 1.5 中显示 JSON 数组列表，但我可以单独查看值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
