Cannot use ng-repeat to loop over array within array

Question

I'm building an application with ionic and just having trouble with the ng-repeat directive when trying to loop over an array within an array and print it out into an unordered HTML list. It just puts everything out within the [] square brackets and puts it into the one li

I feel like I am just missing something basic here. I can target a string in the array by going [2] at the end of the call but that is besides the point. Would love to be able run a for while loop and print 5 string values in the array out into an <li> each.

The controller defined in javascript:

tfdisplays.controller('ReptilesController', ['$scope', '$http',
    function($scope, $http) {
        $http.get('js/reptileData.json').success(function(data) {
            $scope.reptiles = data.reptiles;
        });
}]);

A simplified version of the JSON code:

{
  "reptiles": [
    {
      "name": "Blue Tongue Lizard",
      "classname": "blue-tongue",
      "scientific_name": "Tiliqua scincoides",
      "featured_image": "blue-tongue",
      "description": "<p>Blue-tongue lizards (Tiliqua scincoides) are large skinks with short limbs (legs) that can grow to 50 centimetres in length. Blue tongue lizards are diurnal, being most active during the morning and afternoon.</p><p>They are found through most of coastal Queensland, and have adapted well to living in people’s backyards where they can find shelter away from predators.</p><p>Blue-tongues are usually solitary animals. 3-5 months after mating, females give birth to up to 20 live young (viviparous) in summer. The young emerge fully independent.</p><p>When annoyed, they will hiss, inflate their body and open their mouth to expose their brightly coloured tongue. They have strong jaws which can deliver a painful bite, although bites are rare.</p>",
      "adaptions": [
        "Excellent camouflage","A combination of large litters and live young result in increased chances of survival for offspring","Powerful jaws to crush snail shells and seeds with hard casings","Ability to ‘drop’ their tail to escape predation","Long-lived (up to 20 years)"
      ],
      "facts": "The tail of Blue-tongues is an important storage site for fat.  They can ‘drop’ their tails in an attempt to escape predators."
    }
  ]
}

And the HTML code I'm using:

<div class="adaptions" ng-repeat='reptile in reptiles | limitTo: 1'>
    <h2>Adaptions</h2>
    <ul>
        <li>{{ reptile.adaptions }}</li>
    </ul>
</div>

Check http://stackoverflow.com/questions/19839743/nested-ng-repeat — Tome Pejoski, Jan 26 '17 at 08:32

score 3 · Accepted Answer · answered Jan 26 '17 at 08:32

You should have

<div class="adaptions" ng-repeat='reptile in reptiles.reptiles | limitTo: 1'>
    <h2>Adaptions</h2>
    <ul>
       <li ng-repeat='adaption in reptile.adaptions'>{{ adaption }}</li>
    </ul>
</div>

DEMO

var app = angular.module('todoApp', []);

app.controller("dobController", ["$scope",
  function($scope) {
    $scope.reptiles  = {
  "reptiles": [
    {
      "name": "Blue Tongue Lizard",
      "classname": "blue-tongue",
      "scientific_name": "Tiliqua scincoides",
      "featured_image": "blue-tongue",
      "description": "<p>Blue-tongue lizards (Tiliqua scincoides) are large skinks with short limbs (legs) that can grow to 50 centimetres in length. Blue tongue lizards are diurnal, being most active during the morning and afternoon.</p><p>They are found through most of coastal Queensland, and have adapted well to living in people’s backyards where they can find shelter away from predators.</p><p>Blue-tongues are usually solitary animals. 3-5 months after mating, females give birth to up to 20 live young (viviparous) in summer. The young emerge fully independent.</p><p>When annoyed, they will hiss, inflate their body and open their mouth to expose their brightly coloured tongue. They have strong jaws which can deliver a painful bite, although bites are rare.</p>",
      "adaptions": [
        "Excellent camouflage","A combination of large litters and live young result in increased chances of survival for offspring","Powerful jaws to crush snail shells and seeds with hard casings","Ability to ‘drop’ their tail to escape predation","Long-lived (up to 20 years)"
      ],
      "facts": "The tail of Blue-tongues is an important storage site for fat.  They can ‘drop’ their tails in an attempt to escape predators."
    }
  ]
};
   
  }
]);

<!DOCTYPE html>
<html ng-app="todoApp">

<head>
  <title>Sample</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-controller="dobController">
 <div class="adaptions" ng-repeat='reptile in reptiles.reptiles | limitTo: 1'>
    <h2>Adaptions</h2>
    <ul>
       <li ng-repeat='adaption in reptile.adaptions'>{{ adaption }}</li>
    </ul>
</div>
 
</body>

</html>

Thanks, your sample actually worked - but only when I made the scope data local within the app.js file. When trying to source it from my external JSON file, it just renders nothing. — Ryan Coolwebs, Jan 26 '17 at 09:25
Uunfortunately no. I was getting undefined in my console.log. Perhaps I will make a plunker and put up the my example. — Ryan Coolwebs, Jan 26 '17 at 12:49
Plunker is just painful to use, so I did something in jsfiddle using your sample and it is not working out https://jsfiddle.net/ervy1jyt/ — Ryan Coolwebs, Jan 26 '17 at 13:29
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/134083/discussion-between-ryan-coolwebs-and-sajeetharan). — Ryan Coolwebs, Jan 26 '17 at 13:57
I will give this one to you as the answer but I had to slightly modify it to work with my JSON file construct. After having a break the concept of doing ng-repeat nesting finally dawned on me... — Ryan Coolwebs, Jan 27 '17 at 12:24

score 2 · Answer 2 · answered Jan 26 '17 at 08:31

2

Try:

<ul>
    <li ng-repeat='adaption in reptile.adaptions'>{{ adaption }}</li>
</ul>

answered Jan 26 '17 at 08:31

Tome Pejoski

1,582
2
10
34

score 0 · Answer 3 · answered Jan 26 '17 at 08:33

0

Should be:

   <div class="adaptions" ng-repeat='reptile in reptiles |     limitTo: 1'>
<h2>Adaptions</h2>
<ul>
    <li ng-repeat='adaptation in reptile.adaptations track by $index'>{{ adaptation }}</li>
</ul>
</div>

answered Jan 26 '17 at 08:33

Developer

6,240
3
18
24

score 0 · Answer 4 · answered Jan 26 '17 at 08:43

0

try this

<div class="adaptions" ng-repeat='reptile in reptiles | limitTo: 1'>
<h2>Adaptions</h2>
<ul>
    <li ng-repeat="adaption in reptile.adaptions">{{adaption}}</li>
</ul>

answered Jan 26 '17 at 08:43

Mohan Krishna

1
2

score 0 · Answer 5 · answered Jan 27 '17 at 12:27

My final solution was to construct something like this in my HTML:

<div class="adaptions" ng-repeat='adaptionGroup in reptiles | filter: { classname: whichReptile }'>
    <h2>Adaptions</h2>
    <ul ng-repeat='adaption in adaptionGroup.adaptions'>
        <li>{{ adaption }}</li>
    </ul>
</div>

Seriously, I was so close to using ng-bind-html...

Cannot use ng-repeat to loop over array within array

5 Answers5