Angular ng-repeat mit verschachtelten Json-Objekten?

Question

Ich habe ein JSON-Objekt, als solche dargestellt werden:

{ 
    "orders" : [ 
    { 
     "ordernum" : "PRAAA000000177800601", 
     "buyer" : "Donna Heywood" 
     "parcels" : [ 
     { 
      "upid" : "UPID56789", 
      "tpid" : "TPID789456789485" 
     }, 
     { 
      "upid" : "UPID586905486090", 
      "tpid" : "TPID343454645455"   
     } 
     ] 
    }, 
    { 
     "ordernum" : "ORAAA000000367567345", 
     "buyer" : "Melanie Daniels" 
     "parcels" : [ 
     { 
      "upid" : "UPID456547347776", 
      "tpid" : "TPID645896579688" 
     }, 
     { 
      "upid" : "UPID768577673366", 
      "tpid" : "TPID784574333345" 
     } 
     ] 
    } 
    ] 
} 

Ich brauche einen Repeater auf der zweiten Ebene diesen, eine Liste der „UPID“ Zahlen zu tun.

Ich weiß schon, wie das Top-Level zu bekommen

<li ng-repeat="o in orders">{{o.ordernum}}</li>

Aber ich bin ein Niveau auf der Sequenz zu einer Schlaufe unklar. Zum Beispiel ist dies falsch:

Ich weiß auch, wie man Nest Repeater diese zu bekommen, aber in diesem Fall muss ich gar nicht die oberste Ebene angezeigt werden soll.

KLARSTELLUNG

Das Ziel ist hier eine Liste zu haben, mit den 4 „UPID“ Zahlen (es gibt 2 für jedes Paket, und es gibt zwei Pakete in der Reihenfolge).

Answer 1

Suchen Sie viel nach einer schönen und einfachen Lösung, um dynamisch zu iterieren. Ich kam mit dieser

JAVASCRIPT (eckig): eine Person ist ein Beispiel für verschachtelte Objekte. Die is_object-Funktion wird in der HTML-Ansicht verwendet.

$scope.person = { 
    "name": "john", 
    "properties": { 
     "age": 25, 
     "sex": "m" 
    }, 
    "salary": 1000 
} 

// helper method to check if a field is a nested object 
$scope.is_object = function (something) { 
    return typeof (something) == 'object' ? true : false; 
}; 

HTML: Definieren Sie eine Vorlage für einfache Tabelle. Der 1. TD ist der Schlüssel, der angezeigt wird. ein anderer TD (2 oder 3, aber nie beide) zeigt den Wert, wenn es kein Objekt (Nummer/String) ist, ODER Schleife erneut, wenn es ein Objekt ist.

<table border="1"> 
<tr ng-repeat="(k,v) in person"> 
    <td> {{ k }} </td> 
    <td ng-if="is_object(v) == false"> {{ v }} </td> 
    <td ng-if="is_object(v)"> 
     <table border="1"> 
      <tr ng-repeat="(k2,v2) in v"> 
       <td> {{ k2 }} </td> 
       <td> {{ v2 }} </td> 
      </tr> 
     </table> 
    </td> 
</tr> 
</table> 

Answer 2

Scheinen, wie Sie gerade ein zwei verschachtelten for-Schleife müssen -

<ul>  
    <div ng-repeat="o in orders"> 
    <li ng-repeat="p in o.parcels">{{p.upid}}</li> 
    </div> 
</ul> 

Die HTML könnte hier ein wenig hässlich sein, aber ich bin mir nicht sicher, was genau Sie sich für. Alternativ können Sie auch ein neues Array des parcels über Mapping erstellen.

Answer 3

Sie können wie in Demo unter neuen Array ‚Pakete‘ erstellen:

var app = angular.module('app', []); 
 
app.controller('homeCtrl', function($scope) { 
 
    $scope.data = { 
 
    "orders": [{ 
 
     "ordernum": "PRAAA000000177800601", 
 
     "buyer": "Donna Heywood", 
 
     "parcels": [{ 
 
     "upid": "UPID56789", 
 
     "tpid": "TPID789456789485" 
 
     }, { 
 
     "upid": "UPID586905486090", 
 
     "tpid": "TPID343454645455" 
 
     }] 
 
    }, { 
 
     "ordernum": "ORAAA000000367567345", 
 
     "buyer": "Melanie Daniels", 
 
     "parcels": [{ 
 
     "upid": "UPID456547347776", 
 
     "tpid": "TPID645896579688" 
 
     }, { 
 
     "upid": "UPID768577673366", 
 
     "tpid": "TPID784574333345" 
 
     }] 
 
    }] 
 
    }; 
 

 
    $scope.parcels = []; 
 
    angular.forEach($scope.data.orders, function(order) { 
 
    angular.forEach(order.parcels, function(parcel) { 
 
     $scope.parcels.push(parcel) 
 
    }) 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="homeCtrl"> 
 

 
    <ul> 
 
     <li ng-repeat="o in parcels">{{o.upid}}</li> 
 
    </ul> 
 

 
    </div> 
 
</div>

Answer 4

Der Grund, dass nicht wie erwartet funktioniert, weil die Pakete Array ist ein Objekt innerhalb jeder einzelnen Order in Ihrem Order-Array, dh es ist kein Objekt des Order-Arrays selbst.

Wenn Ihre Aufträge Array auf dem $ Rahmen einer Steuerung definiert ist, dann erstellen Sie das Array auf dem $scope Variable:

$scope.allParcels = $scope.orders 
    .map(function (elem) { 
     return elem.parcels; 
    }) // get an array where each element is an array of parcels. 
    .reduce(function (previousValue, currentValue) { 
     return previousValue.concat(currentValue); 
    }); // concat each array of parcels into a single array of parcels 

dann auf der Vorlage, Sie <li ng-repeat='p in allParcels'>{{p.upid}}</li>

verwenden können, wenn, aber Sie wollen nicht, dass das Array auf dem $scope zu platzieren, ich glaube, Sie etwas ähnliches wie dies tun können:

<li ng-repeat="p in orders 
    .map(function (elem) { 
     return elem.parcels; 
     }) 
    .reduce(function (previousValue, currentValue) { 
      return previousValue.concat(currentValue); 
    })">{{p.upid}}</li> 

althoug h Ich bin nicht 100% sicher, dass Angular die .map/.reduce im ng-repeat Ausdruck auswertet (auch ein Array, das auf diese Weise in einem ng-repeat erzeugt wird, ist schlecht beraten, da angular ständig über map/auf jeden $digest Zyklus reduzieren).

Answer 5

Eigentlich die gleiche Antwort von @sylwester. Der bessere Weg, es in filter zu setzen. Und Sie können es wiederverwenden, indem Sie den Parameter propertyName übergeben.

In Ihrem Fall kamen wir parcels

JS

myApp.filter('createarray', function() { 
    return function (value, propertyName) { 
     var arrayList = []; 
     angular.forEach(value, function (val) { 
      angular.forEach(val[propertyName], function (v) { 
       arrayList.push(v) 
      }); 
     }); 
     return arrayList; 
    } 
}); 

HTML

<ul> 
    <li ng-repeat="o in ordersList.orders | createarray: 'parcels'">{{o.upid}}</li> 
</ul> 

Hier ist working Fiddle