CODEWITHSUNDEEP
angularjsjsonangularjs-ng-repeat
Tidya
Tidya

Reputation: 39

ng-repeat for array of objects in json

I had been trying to display objects fields like name, address in a table from a remote JSON file. I can't seem to figure out what I am doing wrong. ng-repeat only works when i index the iterator.

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>

Upvotes: 0

Views: 9478

Answers (5)

Radha vedak
Radha vedak

Reputation: 64

For Json objects You need to use key value in ng-repeat

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

You can take reference here : http://docs.angularjs.org/api/ng.directive:ngRepeat

Upvotes: 0

Manikandan Velayutham
Manikandan Velayutham

Reputation: 2228

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>

Upvotes: 0

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27192

Your code is working fine. No need to put extra ng-repeat

DEMO

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>

Upvotes: 0

dev8080
dev8080

Reputation: 4020

You were missing the .data . Try this:

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

Upvotes: 1

Mansi Parekh
Mansi Parekh

Reputation: 519

in controller it should be:

$scope.artists = response.data.data;

Upvotes: 1

Related Questions