ng-Wiederholung für Array von Objekten in JSON

Ich hatte versucht, Objekte Felder wie name, address in einer Tabelle aus einer Remote-JSON-Datei anzuzeigen. Ich kann nicht herausfinden, was ich falsch mache. ng-repeat funktioniert nur, wenn ich den Iterator indexiere.ng-Wiederholung für Array von Objekten in JSON

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>

Quelle

2017-04-11 Tidya

fügen Sie die json Struktur – Groben

{ "Erfolg": "Ja", "data": [ { "id": "1", "parent_retailer": 1, "name": "dummy", "Adresse": "1234d" "Status": true, "geo_location": { "x": 24,321, "y": 74,102 } }, { "id": "2" , "parent_retailer": 1, "name": "dummy2" "Adresse": "fdsds" "Status": true, "geo_location": { "x": 24,321, "y" : 74,102 } }, ], "error_code": "", "ERROR_DESCRIPTION": "" } – Tidya

Studieren Sie Ihre JSON. Verwenden Sie wahrscheinlich https://jsonformatter.curiousconcept.com/, um Ihren JSON neu zu strukturieren (verschönern) und dann seine Struktur zu verstehen. Du wirst deine Antworten bekommen. –

in Controller sollte es sein:

$scope.artists = response.data.data;

Quelle

2017-04-11 07:40:44

Das hat funktioniert! Vielen Dank. Und wie würde ich auf das "Geo-Location" -Objekt innerhalb des Objekts oder ein Array innerhalb des Objekts zugreifen? – Tidya

Beispiel: '{ "id": "1", "name": "dummy" "Adresse": "1234d" "geo_location": { "x": 24,321, "y": 74.102 }, "dummy_array": [ 1, 2, ] } ' Sie es mit der Taste zugreifen können wie' x.geo-location' oder 'x.dummy-array'. Sie können erneut ng-repeat zum Iterieren des Arrays verwenden. –

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>

Quelle

2017-04-11 07:30:33

Sie die .data fehlten. Versuchen Sie folgendes:

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

Quelle

2017-04-11 07:40:54 dev8080

Für JSON-Objekte Sie müssen in Schlüsselwert verwenden ng-repeat

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

Sie hier Bezug nehmen: http://docs.angularjs.org/api/ng.directive:ngRepeat

Quelle

2017-04-11 07:41:10

Ihr Code funktioniert gut. Kein Bedarf Extra setzen ng-repeat

DEMO

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

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

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>

Quelle

2017-04-11 07:43:20

ng-Wiederholung für Array von Objekten in JSON

Antwort

Verwandte Themen