Accessing the nested Arrays using ng-repeat in angularjs

Question

I'm not able to access the array images in the nested collection. Why am I not able to see any output?

The model:

var obj = [{
    "id": "7",
    "date": "1 Jan",
    "images": ["507f42c682882", "507e24b47ffdb", "507e2aeca02d5", "507e2b19663a9"]
}, {
    "id": "7",
    "date": "1 Jan",
    "images": ["507f42c682882", "507e24b47ffdb", "507e2aeca02d5", "507e2b19663a9"]
}];

This is the HTMl with ng-repeat:

<ul>
    <li ng-repeat="img in item"> 
        <br /> 
        <li ng-repeat="img1 in img.images">{{img1}}</li>
    </li>
</ul>

Can anyone point me to what I'm missing?

thomaux · Accepted Answer · 2014-01-21 10:43:13Z

10

The problem is you are trying to repeat a list of li elements inside of a li element, which is invalid HTML. As such, angular will not render this.

Update your HTML to:

<ul>
    <li ng-repeat="img in item"> 
        <ul>
            <li ng-repeat="img1 in img.images">{{img1}}</li>
        </ul>
    </li>
</ul>

edited Jan 21, 2014 at 10:43

answered Jan 16, 2014 at 12:50

thomaux

19.8k10 gold badges83 silver badges107 bronze badges

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

2 Comments

Sam Over a year ago

Of course if u didn't want nested uls you are screwed

thomaux Over a year ago

You'll need to find another approach if you want to render a flat list, that's true. Either by changing your HTML structure or by flattening the input array

Collectives™ on Stack Overflow

Accessing the nested Arrays using ng-repeat in angularjs

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related