angularjs ng-repeat on two levels but just one output

angularjs, angularjs-ng-repeat, javascript

Solution

I hope I've understood question: you would like to have one ngRepeat on a nested object. So kind of linearize object.

First approach would be to create filter:

app.filter('linear', function() {
  return function(value) {
    var result = {};
    for(var key in value) {
      for(var cKey in value[key]) {
        result[key+'_'+cKey] = value[key][cKey];
      }      
    }
    return result;
  };
});

and in thml:

<li ng-repeat="(key, value) in marketplaces | linear">
          {{key}}: {{value}}
</li>

But unfortunally AngularJS have problems when in filter you create new elements. You can have error message in console kind of:

10 $digest iterations reached

Without hacks with `$$hash` you can't achieve that functionality for now (Please correct me if I am wrong).

So I think for now the solution would be to watch 'marketplaces' in controller and create new object using same code as in controller that use in ngRepeat:

$scope.$watch('marketplaces', function(value) {
    var result = {};
    for(var key in value) {
      for(var cKey in value[key]) {
        result[key+'_'+cKey] = value[key][cKey];
      }      
    }
    $scope.linearMarketplaces = result;

  }, true);

And in HTML:

    <li ng-repeat="(key, value) in linearMarketplaces">
      {{key}}: {{value}}
    </li>

Plunker with both solutions: http://plnkr.co/edit/pYWFhqSqKAa9gpzek77P?p=preview

Problem

I have a big object that looks something like this : ``` scope.marketplaces = { first_example : { ... }, second_example : { ... }, ... }; ``` What I'm trying to do is loop through the big object like this : ``` <section> <ul> <li ng-repeat="(key, value) in marketplaces"></li> </ul> </section> ``` And inside the loop, loop again each object, but instead of appending to DOM something like : ``` <li> ... first level loop ... <li> ... second level loop ... </li> </li> ``` I would like to have just one `<li></li>` despite the level I'm looping through. The reason why I want it like that is because I need the `key` from the first loop to be referenced down the level loops and still have just one `li`. I've read that `ng-repeat="friend in friends | filter:searchText"` could do what I want but I'm not sure if in the filter expression I can dynamically specify the `key` or something else that is needed instead of `searchText` ( I guess that is an already know property of the object ). So my question is, can I achieve what I just explained with the `filter` or is there another way of doing it ?

Original source