AngularJS : Get each object from array and then make async calls

Question

I have two tables, Category and Products with a 1-N cardinality.

What I need to do is get every product that belongs to an specific category.

This is the html table

<tr ng-repeat="category in categories">
    <td>{{category.id}}</td>
    <td>{{category.name}}</td>
    <td>{{products[category.id]}}</td>
</tr>

And this is the controller but I don't know how to merge the categories array with the another function in order to get each object from the categories array and then make the async call with the $http service

app.controller("appController", function($scope. $http, getCategoriesService){

    // Here I get all categories
    $scope.categories = getCategoriesService.query();

    //1. This function receive an object as a parameter and then 
    // make the respective request.
    //2. So what I need to do is send every category from 'categories'
    // array and get all products by category.
    //3. I don't know how to merge this function with the array above
    function(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 idea?

jbrown · Accepted Answer · 2016-12-15 16:57:40Z

1

You can handle it all in your HTML with a second ng-repeat that filters the products by current category, like this:

<tr ng-repeat="category in categories">
  <td>{{category.id}}</td>
  <td>{{category.name}}</td>
  <td>
    <table>
      <tr ng-repeat="product in products | filter: {categoryId: category.id}">
        <td>{{ product.name}}</td>
        </tr>
    </table>
  </td>
</tr>

Here's a working plunk.

answered Dec 15, 2016 at 16:57

jbrown

3,0351 gold badge18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

wilson Over a year ago

Nice, please see this example plnkr.co/edit/XUMO0Vp9neORCd93v9gE?p=preview I don't know what's wrong.

jbrown Over a year ago

@wilson - What happened to product.categoryId (Product / Category Id) in your original question?

wilson Over a year ago

As I'm working with JSON format, the product object has nested the category object not only its id.

jbrown Over a year ago

@wilson - In any event, since your dealing with a nested object (category) your filter needs to be this filter: {category: {id: c.id}}

Blablalux · Accepted Answer · 2016-12-15 16:53:52Z

0

Once you have your categories, why wouldn't you do something like:

categories.forEach(
  category => getProducts(category);
);

With getProducts() being something like:

 function getProducts(category){
        $http("getProductsByCategory/"+category.id)
        .success(function(data){
            $scope.product[category.id];
        })
        .error(function(status){
            console.log(status)
        })
    }

answered Dec 15, 2016 at 16:53

Blablalux

5051 gold badge5 silver badges9 bronze badges

Collectives™ on Stack Overflow

AngularJS : Get each object from array and then make async calls

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related