I am working with two tables, Category and Products, linked by a 1-N cardinality relationship.
https://i.sstatic.net/e6C2y.png
My goal is to retrieve all products belonging to a specific category.
https://i.sstatic.net/yDrjr.png
Here is the HTML table structure:
<tr ng-repeat="category in categories">
<td>{{category.id}}</td>
<td>{{category.name}}</td>
<td>{{products[category.id]}}</td>
</tr>
The challenge lies in merging the 'categories' array with another function within the controller to handle asynchronous requests for each category.
app.controller("appController", function($scope. $http, getCategoriesService){
// Retrieve all categories here
$scope.categories = getCategoriesService.query();
// Function to handle fetching products based on category
function getCategoryProducts(category){
$http("getProductsByCategory/"+category.id)
.success(function(data){
$scope.product[category.id];
})
.error(function(status){
console.log(status)
})
}
});
app.factory("getCategoriesService", function($resource){
return $resource("categories", {}, {
listCategories: {
method: "GET",
isArray: true
}
})
})
Any suggestions or ideas on how to approach this?