Angular: How to render array of objects containing array?

Question

How can I render this array of objects in Angular?

var list = [{
    collaborators: [{
      id: 1,
      name: "test"
    }]
  },
  {
    colleagues: [{
      id: 2,
      name: "colleague2"
    }]
  }
]

I tried in this way

<div *ngFor="let el of list">
  <div *ngFor="let e of el.collaborators">
    {{e.id}}
  </div>
</div>

But it doesn't work

yes, this doesn't work because the array name is different: collaborators and colleagues. And in HTML you are accessing only collaborators. — Rohit Tagadiya
– Rohit Tagadiya, Commented Oct 19, 2020 at 3:56

Owen Kelvin · Accepted Answer · 2020-10-19 03:44:16Z

1

Lets break down your list

list[0] will give

{collaborators: [{id: 1, name: "test"}]},

and list[1] will give

{colleagues: [{id:2, name: "colleague2"}]}

Lets now loop

   <div *ngFor="let e of list[0].collaborators">
     {{e.id}}
   </div>
  <div *ngFor="let e of list[1].colleagues">
     {{e.id}}
   </div>

We can also combine them like

  <div *ngFor="let e of list">
     <ng-container *ngIf=' e.collaborators'>
        <div *ngFor='let collaborator of e.collaborators'>
            {{ collaborator.id }}
         </div>
     </ng-container>
     <ng-container *ngIf=' e.colleagues'>
        <div *ngFor='let colleague of e.colleagues'>
            {{ collaborator.id }}
         </div>
     </ng-container>
   </div>

edited Oct 19, 2020 at 3:44

answered Oct 19, 2020 at 3:37

Owen Kelvin

15.1k11 gold badges51 silver badges86 bronze badges

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

Comments

lissettdm · Accepted Answer · 2020-10-18 21:21:41Z

0

You are missing (let e) :

   <div *ngFor="let e of el.collaborators">
     {{e.id}}
   </div>

answered Oct 18, 2020 at 21:21

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

2 Comments

Andrew88 Over a year ago

No...it was an error of transcription. It doesn't work also with "let" declaration

lissettdm Over a year ago

Is list part of the component scope? constructor() { this.list=[...]}

Collectives™ on Stack Overflow

Angular: How to render array of objects containing array?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related