ng-repeat 用于 json 中的对象数组答案

【问题标题】：ng-repeat for array of objects in jsonng-repeat 用于 json 中的对象数组
【发布时间】：2017-04-11 07:18:05
【问题描述】：

我一直试图在远程 JSON 文件的表中显示对象字段，如 name、address。我似乎无法弄清楚我做错了什么。 ng-repeat 仅在我索引迭代器时有效。

angular.module('mainApp', [])
.controller('branchListCtrl', function($scope, $http) {
  $http.get('http://some.url.com')
  .then(function(response) {              
    $scope.artists = response.data;
    console.log($scope.artists);
  });
});

<tr ng-repeat="x in artists"> 
  <td>{{x.name}}</td> <!--this only gives empty rows equal to # of objectsin json-->
  <td>{{x.address}}</td>
</tr>    
<tr ng-repeat="x in artists">
  <td>{{x[1].name}}</td>
  <td>{{x[1].address}}</td>
</tr>

【问题讨论】：

添加json结构
{ "success":"yes", "data":[ { "id":"1", "parent_retailer":1, "name":"dummy", "address":" 1234d", "status":true, "geo_location":{ "x":24.321, "y":74.102 } }, { "id":"2", "parent_retailer":1, "name":"dummy2" , "地址":"fdsds", "状态":true, "geo_location":{ "x":24.321, "y":74.102 } }, ], "error_code":"", "error_description":"" }
研究你的 JSON。可能使用jsonformatter.curiousconcept.com 来重构（美化）你的JSON，然后理解它的结构。你会得到你的答案。

标签： angularjs json angularjs-ng-repeat

【解决方案1】：

在控制器中应该是：

$scope.artists = response.data.data;

【讨论】：

这成功了！谢谢一堆..我将如何访问对象内的“地理位置”对象或对象内的数组？
例如：{ "id": "1", "name": "dummy", "address": "1234d", "geo_location": { "x": 24.321, "y": 74.102 }, "dummy_array": [ 1, 2, 3 ] } 您可以使用x.geo-location 或x.dummy-array 之类的密钥访问它。您可以再次使用 ng-repeat 来迭代数组。

【解决方案2】：

您缺少 .data 。试试这个：

<tr ng-repeat="artist in artists.data"> 
   <td>{{artist.name}}</td>
     <td>{{artist.address}}</td>
</tr>

【讨论】：

【解决方案3】：

您的代码运行良好。无需额外添加ng-repeat

演示

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.artists = [{
	"id": "1",
	"parent_retailer": 1,
	"name": "dummy",
	"address": "1234d",
	"status": true,
	"geo_location": {
		"x": 24.321,
		"y": 74.102
	}
}, {
	"id": "2",
	"parent_retailer": 1,
	"name": "dummy2",
	"address": "fdsds",
	"status": true,
	"geo_location": {
		"x": 24.321,
		"y": 74.102
	}
}];
});

table,tr,td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table>
  <tr>
    <td>Name</td>
    <td>Address</td>
  </tr>
  <tr ng-repeat="x in artists"> 
    <td>{{x.name}}</td>
    <td>{{x.address}}</td>
  </tr>
</table>
</div>

【讨论】：

【解决方案4】：

var app = angular.module('myApp',[]);

app.controller('ctrl', function($scope){

$scope.datas = {"success":"yes", "data":[ { "id":"1", "parent_retailer":1, "name":"dummy", "address":"1234d", "status":true, "geo_location":{ "x":24.321, "y":74.102 } }, { "id":"2", "parent_retailer":1, "name":"dummy2", "address":"fdsds", "status":true, "geo_location":{ "x":24.321, "y":74.102 } }, ], "error_code":"", "error_description":"" };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="ctrl">
<div ng-repeat="dat in datas.data">
{{dat.id}} {{dat.name}} {{dat.address}}  {{dat.geo_location.x}}
</div>

</div>
</body>

【讨论】：

【解决方案5】：

对于Json对象需要在ng-repeat中使用key值

<tr ng-repeat="(key, value) in artists"> 
 <td>{{key}}</td> 
 <td>{{value}}</td>
</tr>

你可以参考这里： http://docs.angularjs.org/api/ng.directive:ngRepeat

【讨论】：