ng-repeat array object inside array object

Question

In my index.html file we use two ng-repeat file to get data from data.json .

In this approach each data created repeated DOM.

How to use single ng-repeat instead of double ng-repeat in my index.html .

<div ng-repeat="x in userdata">
      <item data="y" ng-repeat="y in x.content"></item>
    </div>

https://plnkr.co/edit/uGRmYSv90kbjFzx9qmkI?p=preview

Answer 1

you can use nested angular for each in js,so u can use single ng-repeat using final scope

Database.getDatabase().success(function(data){
      $scope.userdata=data.document;
       $scope.sample = [];
  angular.forEach($scope.userdata, function(content) {
    angular.forEach(content.content, function(content) {
      $scope.sample.push(content);
    })
  })

}).error(function(){
});

now u can loop with sample as

<div ng-repeat="x in sample">
     {{x.content}}
    </div>

updated with foreach

Answer 2

Instead of doing $scope.userdata = data.document you could do:

$scope.userdata = data.document.reduce(function(a, b) { 
    return a.concat(b.content);
}, []);

This will place all the content in the same array. and use it exactly how you have commented in your plunker

<item data="x" ng-repeat="x in userdata"></item>

Here's an update on your plnkr

Answer 3

create a map with the contents and add as another object to the documents

var createMap = function(list) {
   var map = {};
   for(var i =0;i <list.length ; i++) {
     map[list[i].name] = list[i].content;
  }
   return map;
 };
    Database.getDatabase().success(function(data){
      for(var i =0;i <data.document.length ; i++) {
        data.document[i]['userdata'] = createMap(data.document[i].content);
      }
      $scope.userdata=data.document;
      console.log($scope.userdata);
}).error(function(){
});

plnkr here