Loop through array in array with Angular

Question

Working on a TODO-app to learn Angular. I have this hardcoded array as a "database" and i want to display the tasks in the view.

var taskLists = [ {name: 'Todays todo', id: '1', tasks:['Make coffe', 'another task']}, {name: 'Tomorrow i will do this', id: '2', tasks:['Code well', 'go to bed']} ];

So how do i iterate through an array inside an array in an angular-view? I tried to have two ng-repeats but cant get it to work right. I want to display the tasks one by one as <td>, not just the whole tasks array as one <td> as it does right now ['Make coffe', 'another task']

This is what the view looks like.

<h2 ng-repeat="object in list">{{object.name}}</h2> <table> <thead> <tr>Tasks</tr> </thead> <tr> <td ng-repeat="task in list">{{task.tasks}}</td> </tr> </table>

you second ng-repeat shouldn't be ng-repeat="task in object.task" ? — Patrick Ferreira, CommentedJun 2, 2014 at 14:30
You were right, it should be task in object.tasks. Plus the HTML from the answer below did the trick. — Bullfinch, CommentedJun 2, 2014 at 14:53
Oh yes, sure, the first repeat was only on the <h2> tag, i did not notice that :-) — Patrick Ferreira, CommentedJun 2, 2014 at 14:55

Bullfinch · Accepted Answer · 2014-06-02 14:50:37Z

You have a problem in your logic.

Fist your HTML tag from child must be inside the parent.

<div class="parent" ng-repeat="object in list"> <h2>{{object.name}}</h2> <table> <thead> <tr>Tasks</tr> </thead> <tr ng-repeat="task in object.tasks"> <td>{{item}}</td> </tr> </table> </div>

Try this and check if it works.

To have the second ng-repeat inside parent did the trick. Thank you! — Bullfinch, CommentedJun 2, 2014 at 14:51

Collectives™ on Stack Overflow

Loop through array in array with Angular

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related