AngularJS: ng-repeat using an array field of an array of objects

Question

I have a json structure:

let total_price = "£100";

let product_groups = [
    {
        "name": "group 1",
        "summary": "group 1 summary",
        "products": [
            {
                "name": "product 1",
                "price": "£10",
                ...
            }, 
            ...
        ]
    },
    ...
]

I am trying to flatten this and display it using a table in the following form

<table class="table">
    <thead>
        <tr>
            <th>Group Name</tr>
            <th>Product Name</tr>
            <th>Product Price</tr>
        </tr>
     </thead>
     <tbody>
         <tr ng-repeat="group in product_groups">
             <td>{{group.name}}</td>
             <td>{{product.name}}</td>
             <td>{{product.price}}<td>
         </tr>
         <tr>
             <th colspan="2">Total</th>
             <td>{{total_price}}</td>
         </tr>
     </tbody>
</table>

But this obviously doesnt give me access to each product. Is there a way I can do this using an ng-repeat? Or will I need to flatten my data structure first in the controller?

amrender singh · Accepted Answer · 2018-08-21 10:47:27Z

2

You can use nested ng-repeat' and useng-repeat-startandng-repeat-end` try the following.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
 $scope.product_groups = [ { "name": "group 1", "summary": "group 1 summary", "products": [ { "name": "product 1", "price": "£10", }, { "name": "product 1", "price": "£10", }, ] }, { "name": "group 2", "summary": "group 2 summary", "products": [ { "name": "product 21", "price": "£20", }, { "name": "product 15", "price": "£80", }, ] } ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="plunker">
  <div ng-controller="MainCtrl">
    <table class="table">
    <thead>
        <tr>
            <th>Group Name</th>
            <th>Product Name</th>
            <th>Product Price</th>
        </tr>
     </thead>
     <tbody>
        <tr ng-repeat-start="group in product_groups"></tr>
         <tr  ng-repeat="product in group.products">
             <td>{{group.name}}</td>
              <td>{{product.name}}</td>
              <td>{{product.price}}</td>
         </tr>
        <tr ng-repeat-end></tr>
     </tbody>
</table>
  </div>
</body>

edited Aug 21, 2018 at 10:47

answered Aug 21, 2018 at 10:33

amrender singh

8,2594 gold badges27 silver badges30 bronze badges

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

5 Comments

Eduardo Over a year ago

Is there a way I could do it without the uppermost ng-repeat being on the tbody? I plan to add an extra tr row at the end for Total Price and this method would end up with duplicates

amrender singh Over a year ago

@Edd Please can you post expected output.

amrender singh Over a year ago

@Edd i have updated the answer, it wont create duplicates now. Please have a look.

Eduardo Over a year ago

ng-repeat-start and ng-repeat-end look very useful thanks

Eduardo Over a year ago

It works but it adds an extra <tr> element either side of each row i'm afraid :( I'm using Bootstrap 4 which adds a lot of extra whitespace for the invisible rows

Aleksey Solovey · Accepted Answer · 2018-08-21 10:32:27Z

You should flatten your JSON. I suggest changing your structure from:

product_groups = [{
  "name": "group 1",
  "summary": "group 1 summary",
  "products": [{
      "name": "product 1",
      "price": "£10"
    },
    {
      "name": "product 2",
      "price": "£20"
    }
  ]
}]

to:

product_groups = [{
    "name": "group 1",
    "summary": "group 1 summary",
    "product": {
      "name": "product 1",
      "price": "£10"
    }
  },
  {
    "name": "group 1",
    "summary": "group 1 summary",
    "product": {
      "name": "product 2",
      "price": "£20"
    }
  }
]

Then you can simply use this example:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.product_groups = [{
      "name": "group 1",
      "summary": "group 1 summary",
      "product": {
        "name": "product 1",
        "price": "£10",
      }
    },
    {
      "name": "group 1",
      "summary": "group 1 summary",
      "product": {
        "name": "product 2",
        "price": "£20",
      }
    }
  ]
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <table class="table">
      <thead>
        <tr>
          <th>Group Name</th>
          <th>Product Name</th>
          <th>Product Price</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="group in product_groups">
          <td>{{group.name}}</td>
          <td>{{group.product.name}}</td>
          <td>{{group.product.price}}
            <td>
        </tr>
      </tbody>
    </table>

  </div>

</body>

</html>

Devraj verma · Accepted Answer · 2018-08-21 10:28:05Z

Hi try below solution

    $scope.newArray = [];

    let product_groups = [
        {
            "name": "group 1",
            "summary": "group 1 summary",
            "products": [
                {
                    "name": "product 1",
                    "price": "£10",
                }, 
            ]
        },
    ];

for(var i = 0; i< product_groups.length; i++) {
   for(var j =0; j< product_groups[i].products.length; j++) {
    var flattenProduct = {
                           gname:product_groups[i].name, 
                           name:product_groups[i].products[j].name,
                           price : product_groups[i].products[j].price
                        };
        $scope.newArray.push(flattenProduct );
 }

}

And Then call in html like below:

<table class="table">
    <thead>
        <tr>
            <th>Group Name</tr>
            <th>Product Name</tr>
            <th>Product Price</tr>
        </tr>
     </thead>
     <tbody>
         <tr ng-repeat="p in newArray">
             <td>{{p.gname}}</td>
             <td>{{p.name}}</td>
             <td>{{p.price}}<td>
         </tr>
     </tbody>
</table>

wahid_abdul · Accepted Answer · 2018-08-21 10:24:37Z

-1

Use a new ng-repeat inside the existing one, like a nested loop.

answered Aug 21, 2018 at 10:24

wahid_abdul

1542 silver badges11 bronze badges

1 Comment

Eduardo Over a year ago

How do I do that in a table structure?

Collectives™ on Stack Overflow

AngularJS: ng-repeat using an array field of an array of objects

4 Answers 4

5 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related