AngularJS ng-repeat for object contains objects and arrays

Question

I have an object, which has objects inside, and arrays in child objects. Here's the structure:

var keywords = {
    "Animals" : {
      "Pets" : [
        "Guppy", "Parrot", "Goldfish", "Dog", "Cat"
      ],
      "Wild animals" : [
        "Tiger", "Ant", "Tetra", "Peafowl", "Mongoose"
      ],
      "Domestic animals" : [
        "Cow", "Pig", "Goat", "Horse"
      ]
    },
    "Food" : {
      "Fast food" : [
        "Cheeseburger", "Hamburger"
      ],
      "Dessert" : [
        "Chocolate", "Cookie", "Cake", "Pie"
      ]
    },
    "Vehicle" : {
      "Motorcycle" : [
        "Harley Davidson"
      ],
      "Car" : [
        "Lamborghini", "Ferrari", "Bugatti", "BMW", "Mercedes"
      ]
    },
    "Movie" : {
      "Science fiction" : [
        "Sunshine", "Interstellar", "The Moon", "Oblivion", "Star Trek", "Star Wars"
      ]
    }
  };

I've made a foreach loop for looping through the elements inside and print them on screen:

  angular.forEach(keywords, function(value, key) {
    console.log(key);

    angular.forEach(value, function(value, key) {
      console.log(key);

      angular.forEach(value, function(value, key) {
        console.log(value);
      })
    })
  })

Now, I'm trying to do the same with ng-repeat directive on a div (that has a div in it, and another in the child div), but can't make it work, have no clue how to start it. Any idea?

Possible duplicate of [Nested ng-repeat](http://stackoverflow.com/questions/19839743/nested-ng-repeat) — Plato, Oct 26 '16 at 14:07
I don't agree. Here, keys aren't the same in an object, they are all different. — Kiss Koppány, Oct 26 '16 at 14:09

score 2 · Accepted Answer · answered Oct 26 '16 at 14:11

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.keywords = {
    "Animals": {
      "Pets": [
        "Guppy", "Parrot", "Goldfish", "Dog", "Cat"
      ],
      "Wild animals": [
        "Tiger", "Ant", "Tetra", "Peafowl", "Mongoose"
      ],
      "Domestic animals": [
        "Cow", "Pig", "Goat", "Horse"
      ]
    },
    "Food": {
      "Fast food": [
        "Cheeseburger", "Hamburger"
      ],
      "Dessert": [
        "Chocolate", "Cookie", "Cake", "Pie"
      ]
    },
    "Vehicle": {
      "Motorcycle": [
        "Harley Davidson"
      ],
      "Car": [
        "Lamborghini", "Ferrari", "Bugatti", "BMW", "Mercedes"
      ]
    },
    "Movie": {
      "Science fiction": [
        "Sunshine", "Interstellar", "The Moon", "Oblivion", "Star Trek", "Star Wars"
      ]
    }
  };
});

.section1{
 background-color: CornflowerBlue; 
}
.section2{
 background-color: lightblue; 
}
.section3{
 background-color: Azure ; 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="(keyword, list) in keywords" class="section1">
    {{keyword}}
    <div ng-repeat="(name, items) in list" class="section2">
      {{name}}
      <div ng-repeat="item in items" class="section3">
          {{item}}
      </div>
    </div>
  </div>
  
  </body>

This solution helped me a lot for better understanding ng-repeat, thank you! — Kiss Koppány, Oct 26 '16 at 14:34

score 0 · Answer 2 · answered Oct 26 '16 at 14:19

0

I think we are not using ng-repeat with this type of array.

You should go throw with this logic.

$scope.html =""; 

  angular.forEach(keywords, function(value, key) {

    $scope.html += "<div>"+ key ;   

    angular.forEach(value, function(value, key) {
    $scope.html += "<div>"+ key ;   

      angular.forEach(value, function(value, key) {
        $scope.html += "<div>"+ key + "</div>";
      })
    $scope.html += "</div>";
    })

    $scope.html += "</div>";
  })

and Print 'html' scope into your HTML page.

{{html}}

I know this is not perfect solution but it's trick to fix you current problem.

answered Oct 26 '16 at 14:19

Nimesh Gami

361
1
2
18

This solution looks very good as well, thanks for sharing! Wish I could accept two ansers. Thank you for your help! – Kiss Koppány Oct 26 '16 at 14:34
We are also using ng-repeat with an object. And this is an *object* and not an *array* – Weedoze Oct 26 '16 at 14:36

AngularJS ng-repeat for object contains objects and arrays

2 Answers2

Linked