Multiple ng-repeat in a table row

Question

I want to use angularJS and use a ng-repeat to display my data. I have a JSON where i have to group a particular row of items by id/name. I am not sure how to achieve the particular output. i have added a snipped with the output i require.

var obj = [{
    "id": 101,
    "name": "Victor",
    "address": "Mumbai"
    "order": [{
        "itemName": "Bulb",
        "quantity": 10
      },
      {
        "itemName": "Soap",
        "quantity": 3
      },
      {
        "itemName": "Towel",
        "quantity": 1
      }
    ]
  },
  {
    "id": 102,
    "name": "Francis",
    "address": "Nagpur"
    "order": [{
        "itemName": "Remote",
        "quantity": 1
      },
      {
        "itemName": "Bread",
        "quantity": 2
      }
    ]
  }
]

<table border="1" width="100%">
  <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Address</th>
    <th>Item Name</th>
    <th>Quantity</th>
  </tr>

  <!--- below is the output that i want -- uncomment and see the output -->

  <tr>
    <td>101</td><td>Victor</td><td>Mumbai</td><td>Bulb</td><td>10</td>
   </tr>
   <tr>
    <td></td><td></td><td></td><td>Soap</td><td>3</td>    
  </tr>
  <tr>
    <td></td><td></td><td></td><td>Towel</td><td>3</td>    
  </tr>
   <tr>
    <td>102</td><td>Francis</td><td>Nagpur</td><td>Remote</td><td>1</td>
   </tr>
   <tr>
    <td></td><td></td><td></td><td>Bread</td><td>2</td>    
  </tr>
 
</table>

Answer 1

Before populating the data, i prefer to split the data as needed to be displayed, subjected, if you are not going further operations into it.

The below js fiddle will give you the output as per your requirement. https://jsfiddle.net/waLvc49x/

<tbody ng-repeat="rows in values">
    <tr ng-repeat="row in rows.order">
      <td>{{!$index?rows.id:''}}</td>
       <td>{{!$index?rows.name:''}}</td>
        <td>{{!$index?rows.address:''}}</td>
         <td>{{row.itemName}}</td>
         <td>{{row.quantity}}</td>
    </tr>
  </tbody>

Answer 2

Explanation :

You have to use ng-repeat to loop through the data. But you will also have to use ng-repeat-start and ng-repeat-end as your first 3 columns are not repeated in every row.

angular.module("tableApp", []).controller("tableController", ['$scope', function($scope) {

  var temp = [{
      "id": 101,
      "name": "Victor",
      "address": "Mumbai",
      "order": [{
          "itemName": "Bulb",
          "quantity": 10
        },
        {
          "itemName": "Soap",
          "quantity": 3
        },
        {
          "itemName": "Towel",
          "quantity": 1
        }
      ]
    },
    {
      "id": 102,
      "name": "Francis",
      "address": "Nagpur",
      "order": [{
          "itemName": "Remote",
          "quantity": 1
        },
        {
          "itemName": "Bread",
          "quantity": 2
        }
      ]
    }
  ]
  /*
  var arr = [];
  for(var i=0;i<temp.length;i++){
  var obj = {}

  obj.id = temp[i].id;
  obj.address = temp[i].address;
  obj.name = temp[i].name;

    for(var j=0;j<temp[i].order.length;j++){
  obj.itemName = temp[i].order[j].itemName;
  obj.quantity = temp[i].order[j].quantity;
  }
  arr.push(obj);
  }*/

  $scope.arr = temp;
}])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="tableApp">
  <table ng-controller="tableController" border="1" width="100%">
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Address</th>
      <th>Item Name</th>
      <th>Quantity</th>
    </tr>

    <!--- below is the output that i want -- uncomment and see the output -->

    <tr ng-if="0" ng-repeat-start="data in arr">
      <tr ng-repeat="a in data.order">
        <td ng-if="!$first"></td>
        <td ng-if="$first">{{data.id}}</td>
        <td ng-if="!$first"></td>
        <td ng-if="$first">{{data.name}}</td>
        <td ng-if="!$first"></td>
        <td ng-if="$first">{{data.address}}</td>
        <td>{{a.itemName}}</td>
        <td>{{a.quantity}}</td>
      </tr>

      <tr ng-if="0" ng-repeat-end></tr>
  </table>
</div>