Angularjs ng-repeat array in array

Question

I want to show an array from another array in a list. I want to use ng-repeat to show the array in a list. I´ve tried all sorts of combinatins, but i can't make it work. I have the following code:

var workouts = this;  
    workouts.workoutslist = [  
        {'workoutId': 1,   
         'workoutName': "Maandag",  
         'exercises':  
                    [   
                        {exerciseId: 1,  
                        exerciseName: "exercise1"},  
                        {exerciseId: 2,  
                        exerciseName: "exercise2"}  
                    ]  
        },  
        {
            'workoutId': 2,   
            'workoutName': "Dinsdag",  
            'exercises':  
                    [ 
                        {exerciseId: 3,  
                        exerciseName: "exercise3"},  
                        {exerciseId: 4,  
                        exerciseName: "exercise4"}  
                    ]
        }
    ];

This works:

<li class="item" ng-repeat="workoutTest in workout.workoutslist[0].exercises">{{ workoutTest.exerciseName }}
            </li>

But this doesn't:

    <li class="item" ng-repeat="workoutTest in workout.workoutslist.exercises  |filter:{workoutId: workoutId}">
{{ workoutTest.exerciseName }}
                </li>

Am i not saying exactly the same in my second code?
EDIT: Plunker: http://plnkr.co/edit/1VQBkuTWAVatexPMsxOd?p=preview

Use nested ng-repeat. for you knoledge follow http://stackoverflow.com/questions/19839743/nested-ng-repeat — Naitik, Mar 13 '15 at 09:40
Do i also have to use nested ng-repeat if i don't want to show my workout? I only want to show the exercises. I have the workouts on another page. — Edgar, Mar 13 '15 at 09:49
no, you aren't saying the same thing. `workoutslist` is an array of objects, each with an `exercises` array. you have 2 loops, one through the array of objects, and one through the array inside the objects. — Claies, Mar 13 '15 at 09:54
@Edgar you should accept one of the answers we all kindly gave you. — Tony Barnes, Apr 10 '15 at 15:59

rtf_leg · Accepted Answer · 2015-03-13T10:00:12.737

Problem explanation:

This works because it targets exercises of single workout:

workoutTest in workout.workoutslist[0].exercises

This not works:

workoutTest in workout.workoutslist.exercises | filter:{workoutId: workoutId}

because filter applied to nonexistent property "exercises" of workoutlist array.

Solution 1:

If you want to display exercises of single workout selected by id - try to define your workouts as object like this:

workouts.workoutslist = { 
    "1": {
        'workoutName': "Maandag",  
        'exercises': [   
            {exerciseId: 1, exerciseName: "exercise1"},  
            {exerciseId: 2, exerciseName: "exercise2"}  
        ]  
    },  
    "2": {
        'workoutName': "Dinsdag",  
        'exercises': [ 
            {exerciseId: 3, exerciseName: "exercise3"},  
            {exerciseId: 4, exerciseName: "exercise4"}  
        ]
    }
};

and access it like this:

exercise in workout.workoutslist[workoutId].exercises

Solution 2:

If you want to display list of workouts that contain lists of exercises than implement two-level list like this:

<ul>
    <li ng-repeat="w in workout.workoutslist">
        <span>{{w.workoutName}}<span>
        <ul>
            <li ng-repeat="e in w.exercises">{{e.exerciseName}}</li>
        </ul>
    </li>
</ul>

I would like to use solution 1, but how do i make the workoutId in exercise in workout.workoutslist[workoutId].exercises dynamic? — Edgar, Mar 13 '15 at 10:30
Add variable workoutId in your controller and use it like this (I assume that you use controller as "workout"): exercise in workout.workoutslist[workout.workoutId].exercises. — rtf_leg, Mar 13 '15 at 10:43

Tony Barnes · Answer 2 · 2015-03-13T10:12:41.450

1

You can ng-repeat nested arrays like this:

<li ng-repeat="workout in workoutslist">
  <ul>
    <li ng-repeat="exercise in workout.exercises"></li>
  </ul>
</li>

Note it's a lot simpler that what you have - i'd also define the object differently. This is easier:

$scope.workoutslist = [];

Instead of:

workouts.workoutslist = [];

JSFiddle

edited Mar 13 '15 at 10:12

answered Mar 13 '15 at 09:50

Tony Barnes

2,625
1
18
29

This works, but is it ok to use:
if i don't want show anything from the workout except the exercises?

Edgar

Mar 13 '15 at 10:34

@Edgar It would work, but it's not a good practice - you'd be iterating over items that you don't want. If you only want to use the nested arrays, It would be far better and easier to have that as an object - essentially, separating the objects that you have currently and use one 'regular' `ng-repeat`. Anyway, this answers your original question about using nested arrays in `ng-repeat`. – Tony Barnes Mar 13 '15 at 12:01

score 0 · Answer 3 · answered Mar 13 '15 at 09:58

It doesn't look like your second extract could work. If I take the first example, we have the following types for the different elements used in your ng-repeat directive:

workout --> object
workout.workoutslist --> array
workout.workoutslist[0] --> object
workout.workoutslist[0].exercises --> array

Do the same exercise with the second code extract and you will see how it doesn't work.

workout.workoutlist --> array
workout.workoutlist.exercises --> ???

Actually, I am not even sure what you are trying to do with the filter after that (but I haven't had the opportunity to use AngularJS that much so far, so it may just be that I haven't come across that kind of use of filter yet).

If you only want to list the exercises, not caring about the workouts containing them, the best thing to do is probably to define a function in your controller that takes care of building the array of exercice objects and use that with ng-repeat. You could also, of course, use nested ng-repeats but each would have to be bound to a different HTML element, something you probably cannot do in your context.

score 0 · Answer 4 · answered Mar 13 '15 at 10:04

0

use it like a simple nested loop.. a cleaner way would be like...

<li ng-repeat="workout in workoutslist"> <ul> <li ng-repeat="exercise in workout.exercises"></li> </ul> </li>

answered Mar 13 '15 at 10:04

Is this best practice to use te li element like that? Because i don't want to show elements of the workout, only the exercises. – Edgar Mar 13 '15 at 10:32

Angularjs ng-repeat array in array

4 Answers4