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
– Patrick Ferreira, Commented Jun 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
– Bullfinch, Commented Jun 2, 2014 at 14:53
Oh yes, sure, the first repeat was only on the <h2> tag, i did not notice that :-) — Patrick Ferreira
– Patrick Ferreira, Commented Jun 2, 2014 at 14:55

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

2

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.

edited Jun 2, 2014 at 14:50

Bullfinch

2552 gold badges6 silver badges16 bronze badges

answered Jun 2, 2014 at 14:35

1st4ck

1,26711 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bullfinch Over a year ago

To have the second ng-repeat inside parent did the trick. Thank you!

Collectives™ on Stack Overflow

Loop through array in array with Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related