Angular JS ng-repeat nested array

Question

I am trying to iterate array using ng-repeat, but not getting proper output.

<table>
   <tr>
     <th>Index</th>
     <th>Items</th>
   </tr>
   <tr ng-repeat="li in list">
     <td ng-repeat="(key,value) in li">{{key}}</td>
     <td ng-repeat="(key,value) in li">{{value}}</td>
   </tr>
</table>


$scope.list = [
        {"foo": ["item1", "item2"]},
        {"bar": ["item1", "item2"]}
    ];

Expected output:

Index   Items
foo    item1
foo    item2
bar    item1 
bar    item2

Actual output:

Index   Items
foo ["item1","item2"]
bar ["item1","item2"]

Anyone help me out to print the exact key,value of list.

Answer 1

You could create an custom filter or function that will simplify the result. That will also get rid of nested ng-repeat's

$scope.simplyfiedList = [];

$scope.list.forEach(function(item){
  Object.keys(item).map(function(key){
    item[key].map(function(i){
      $scope.simplyfiedList.push({key: key, value: i});
    })
  })
});

Html

<table class="table table-responsive">
  <tr>
    <th>Index</th>
    <th>Items</th>
  </tr>
  <tr ng-repeat="item in simplyfiedList">
    <td>{{item.key}}</td>
    <td>{{item.value}}</td>
  </tr>
</table>

Demo Plunker

Answer 2

Given the structure of your data you'd probably have to do something like this.

<div ng-repeat="li in list">
    <div ng-repeat="(key, itemArray) in li">
        <tr ng-repeat="item in itemArray">
            <td>{{key}}</td>
            <td>{{item}}</td>
        </tr>
    </div>
</div>

I didn't test it and also I wouldnt recommend it. I'd rather write a function that flattens the data.