Say I have an object with keys corresponding to products and values corresponding to objects which in turn have keys corresponding to price points at which those products have sold, and values corresponding to amount sold.
For example, if I sold 10 widgets at $1 and 5 widgets at $2, I'd have the data structure:
{ 'widget': {'1': 10, '2': 5} }
I'd like to loop over this structure and generate rows in a table such as this one:
thing price amount
---------------------
widget $1 10
widget $2 5
In Python it's possible to nest list comprehensions to traverse lists data structures like this. Would such a thing be possible using ng-repeat?
How about this?
http://plnkr.co/edit/ZFgu8Q?p=preview
Controller:
$scope.data = {
'widget1': {
'1': 10,
'2': 5
},
'widget2': {
'4': 7,
'6': 6
}
};
View:
<div ng-controller="MyCtrl">
<table>
<thead>
<tr>
<td>thing</td>
<td>price</td>
<td>amount</td>
</tr>
</thead>
<tbody ng-repeat="(productName, productData) in data">
<tr ng-repeat="(price, count) in productData">
<td>{{productName}}</td>
<td>{{price|currency}}</td>
<td>{{count}}</td>
</tr>
</tbody>
</table>
</div>
Output:
thing price amount
----------------------
widget1 $1.00 10
widget1 $2.00 5
widget2 $4.00 7
widget2 $6.00 6
This would output a tbody
per product (thanks to Sebastien C for the great idea).
If needed, you can differentiate between the first, middle and last tbody
(using ng-repeat
's $first
, $middle
and $last
) and style them with ng-class
(or even native CSS selectors such as :last-child
-- I would recommend ng-class
though)
ng-repeat does not currently have a possible way to complex iterate inside objects (the way it's possible in python). Check out the ng-repeat source code and note that the regex expression matched is:
(key, value) in collection
- and that they push into the key array and assign to the value list, and so you cannot possibly have a complex ng-repeat sadly...
There are basically 2 types of solutions which were already answered here:
I think solution 2 is better as I like to keep my sorting & coding logic inside the controller, and not deal with it in the HTML document. This will also allow for more complex sorting (i.e based on price, amount, widgetName or some other logic).
Another thing - the second solution will iterate over possible methods of a dataset (as hasOwnProperty wasn't used there).
I've improved the solution in this Plunker (based on the finishingmove Plunker) in order to use angular.forEach and to show that the solution is rather simple but allows for complex sorting logic.
$scope.buildData = function() {
var returnArr = [];
angular.forEach($scope.data, function(productData, widget) {
angular.forEach(productData, function( amount, price) {
returnArr.push( {widgetName: widget, price:price, amount:amount});
});
});
//apply sorting logic here
return returnArr;
};
$scope.sortedData = $scope.buildData();
and then in your controller:
<div ng-controller="MyCtrl">
<table>
<thead>
<tr>
<td>thing</td>
<td>price</td>
<td>amount</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in sortedData">
<td>{{ item.widgetName }}</td>
<td>{{ item.price|currency }}</td>
<td>{{ item.amount }} </td>
</tr>
</tbody>
</table>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With