How to nest ng-repeat with two related entities - angularjs

Question

I have two entities:
OrderOpened
ProductOrdered with relation:
relationship ManyToOne {
ProductOrdered {Order} to OrderOpened
}
I need to list Orders with related Products in one view.
No problem with Orders:
<tr ng-repeat="orderOpened in vm.orderOpeneds track by orderOpened.id">
<td><a ui-sref="order-opened-detail({id:orderOpened.id})">{{orderOpened.id}}</a></td>
<td>
<a ui-sref="desk-detail({id:orderOpened.desk.id})">{{orderOpened.desk.description}}</a>
</td>
<td>{{orderOpened.openingTime | date:'shortTime'}}</td>
<td>{{orderOpened.user.login}}</td>
[...]
</tr>
But then I want to nest Products related to this Order like:
<tr ng-repeat="productOrdered in vm.productOrdereds track by productOrdered.id">
<td><a ui-sref="product-ordered-detail({id:productOrdered.id})">{{productOrdered.id}}</a></td>
<td>{{productOrdered.orderedTime | date:'medium'}}</td>
[...]
</tr>
Controller:
[...]
function loadAll() {
OrderOpened.query(function(result) {
vm.orderOpeneds = result; //works
angular.forEach(vm.orderOpeneds, function(productOrdered) {
TestOrderOpened.query({id:productOrdered.id}, function(result2) {
//in java: List<ProductOrdered> productOrdereds = productOrderedRepository.findAllByOrderId(id);
vm.productOrdereds = result2;
})
})
});
}
In result I get products related only to last iteration of angular.forEach, not related to current Order.
How can I pass productOrdered.id to ng-repeat directive or use another way to get related entities in one view?

Answer 1

The result you get is normal:
In your controller, you have 2 lists defined:
vm.orderOpeneds
vm.productOrdereds
With this, you can only display one list of productOrdereds, which happens to be the one of the last loaded order.
If you want to display the list of products for each order, you have to store them somewhere. Several solutions:
1) In each loaded order, store the related products, i.e.
function loadAll() {
OrderOpened.query(function(result) {
vm.orderOpeneds = result; //works
angular.forEach(vm.orderOpeneds, function(productOrdered) {
TestOrderOpened.query({id:productOrdered.id}, function(result2) {
//in java: List<ProductOrdered> productOrdereds = productOrderedRepository.findAllByOrderId(id);
// CHANGE: here store the products in the order
productOrdered.productOrdereds = result2;
})
})
});
}
2) Or buid a separate collection like a map whose keys are the order id and the values the list of associated products
var productsByOrderId = {}
function loadAll() {
OrderOpened.query(function(result) {
vm.orderOpeneds = result; //works
angular.forEach(vm.orderOpeneds, function(productOrdered) {
TestOrderOpened.query({id:productOrdered.id}, function(result2) {
//in java: List<ProductOrdered> productOrdereds = productOrderedRepository.findAllByOrderId(id);
// CHANGE: here store the products in the map
productsByOrderId[productOrdered.id] = result2;
})
})
});
}

Answer 2

You can bind product with your orders.
var results = [];
function loadAll() {
OrderOpened.query(function(result) {
vm.orderOpeneds = result; //works
angular.forEach(vm.orderOpeneds, function(productOrdered) {
TestOrderOpened.query({id:productOrdered.id}, function(result2) {
// bind your product with orders
productOrdered.productOrdereds = result2;
// then
results.push(productOrdered);
});
});
vm.orderOpeneds = results;
});
}