ng-repeat on object angularjs

Question

I have an object like this

Obj = {
  "elements":[
               {"name":"something","id":"v1-234"},
               {"name":"somethingElse","id":"v1-239"}
             ],
  "paging":{
    "next" : "100",
    "total": "2000"  
   },
 "linked"={
            "partners":[
                         {"id":"82","name":"A"},
                         {"id":"83","name":"B"}
                       ],
             "instructors":
                       [
                         {"id":"11232","name":"alex"},
                         {"id":"11432","name":"boob"}
                       ]
           }
    }

I have equal items inside the elements array and the partner and instructors array. I have only placed 2 items just for display there could be many.

The Obj.elements[0] is related to Obj.linked.partners[0] and Obj.linked.instructors[0]. Similarly for the first,second,third ..... items as well.

How can I ng-repeat on this object such that I can show

Obj.elements[i] Obj.linked.partners[i] Obj.linked.instructors[i]

at a time in html template ?

You will have to format your viewmodel to meet your needs.

Tamas Hegedus
– Tamas Hegedus

2016-09-16 21:21:36 +00:00
Commented Sep 16, 2016 at 21:21 — Tamas Hegedus
– Tamas Hegedus, Commented Sep 16, 2016 at 21:21

Lucas L · Accepted Answer · 2016-09-16 21:56:50Z

5

If your elements, partners, and instructors arrays will always be the same length and you wanted to for example join together the names you could try something like this.

<div ng-repeat="element in Obj.elements">
    {{element.name}} {{Obj.linked.partners[$index].name}} {{Obj.linked.instructors[$index].name}}
</div>

$index is used by Angular in a ng-repeat to keep track of its position when iterating through an object. Here is the documentation: ng-repeat

edited Sep 16, 2016 at 21:56

Lucas L

1311 silver badge8 bronze badges

answered Sep 16, 2016 at 21:30

RickCoxDev

1651 silver badge11 bronze badges

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

2 Comments

drakyoko Over a year ago

I think Obj.elemnts would throw an error since it doesn't seem a valid repeat_expression (see docs) you should modify it in something like ng-repeat="item in Obj.elements" even if you don't use item

RickCoxDev Over a year ago

It wouldn't throw an error because Obj.elements is an array.

Matías Fidemraizer · Accepted Answer · 2016-09-16 21:33:10Z

1

ng-repeat has the $index scoped variable:

<ANY ng-repeat="element in model.elements">
   <span ng-bind="element.name"></span>
   <span ng-bind="model.linked.partners[$index].name"></span>
   <span ng-bind="model.linked.instructors[$index].name"></span>
</ANY>

edited Sep 16, 2016 at 21:33

answered Sep 16, 2016 at 21:23

Matías Fidemraizer

65.1k19 gold badges132 silver badges216 bronze badges

2 Comments

drakyoko Over a year ago

I think the span should be ng-bind=model.linked.[...]

Matías Fidemraizer Over a year ago

@drakyoko should be what? ;P

Collectives™ on Stack Overflow

ng-repeat on object angularjs

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related