When working with AngularJs in a web app, I encountered a challenge involving a large array containing two groups of objects, each with a sub-array. My goal was to display a table where the first row shows the foodName and totalCount, which is the sum of all foodCount in the sub-array. Here is the complete object structure:
$scope.allData = [
{
foodName: "Apple",
totalCount: 7,
avaiable: [
{
foodType: "Big",
foodCount: 4
}, {
foodType: "Small",
foodCount: 3
}
] // end available
},{
foodName: "Milk",
totalCount: 11,
avaiable: [
{
foodType: "Big",
foodCount: 2
}, {
foodType: "Medium",
foodCount: 7
}, {
foodType: "Small",
foodCount: 2
}
] // end available
}];
I have provided a link to what I have attempted so far: https://plnkr.co/edit/cLvQBYuA3ZwtH5m4gmd7?p=preview
This image illustrates my expected outcome: https://i.sstatic.net/SqDBj.png
Please disregard the initial empty column, as an icon needs to be added there.
I initially tried using two ng-repeats, but it did not yield the desired result. Can you please advise on why that might be?