angular not displaying object inside array of object

Question

i'm using angular to get data from an api.. the data structure i have is array(object).array(object)

this is my data

and this is the component ts

export class LoginComponent implements OnInit {

collaborator:Collaborator[]=[];
entreprise:Entreprise[]=[];


  constructor(private serv:EntrepriseService) { }

 getcoll(){
  this.serv.getcollaboratorses().subscribe(res =>{
     this.collaborator = res.content;
     // this.entreprise=res.content.entreprise;
      console.log(res);
    },err =>{

      console.log(err);
    });
}

the collaborator module

import {Entreprise} from './entreprise';
export interface Collaborator {

    id:String;
    name:String;
    email:String;
    password:String;
    phone:String;
    entreprise:Entreprise[];
    roles:any[];
}

entreprise module

export interface Entreprise {

    id:String;
    name:String;
    socialPurpose: String;
    businessCode:String;
    activityDomain:String;
    email:String;
    password:String;
    logo:String;
    roles:any[];

}

html code

<p *ngFor="let ee of collaborator">
   {{ee.name}} - <ng-container *ngIf="ee?.entreprise"> {{ee.entreprise.name}} </ng-container>

  </p>

when i delete this part <ng-container *ngIf="ee?.entreprise"> {{ee.entreprise.name}} </ng-container> the code works fine and i can the browser dislays all the collaborators'name but when i try to display their roles or entreprise i cannot ..

Lagistos · Accepted Answer · 2020-04-19 18:00:39Z

2

ee.entreprise is an array, name doesn't exists there. warp it with another ngfor like in the code below

<p *ngFor="let colab of collaborator">
   {{colab.name}} - 
    <ng-container *ngIf="colab.entreprise?.length"> 
        <span *ngFor="let ee of colab.entreprise"> 
            {{ee.name}} 
        </span>
    </ng-container>
  </p>

answered Apr 19, 2020 at 18:00

Lagistos

4,0382 gold badges14 silver badges20 bronze badges

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

Comments

Milan Tenk · Accepted Answer · 2020-04-19 14:52:40Z

1

The ee.enterprise is an array, the ee.enterprise.name does not exist. First it has to be indexed. For example "ee.enterprise[0].name, ee.enterprise[1].name and so on.

Most probably an other ngFor will be needed for the array of ee.enterprise.

answered Apr 19, 2020 at 14:52

Milan Tenk

2,7681 gold badge20 silver badges34 bronze badges

1 Comment

hamza mon Over a year ago

i treid ` <p *ngFor="let ee of collaborator"> {{ee.name}} - <div *ngFor="let ent of ee.entreprise" > {{ent.name}} </div> </p>` but not working too

Collectives™ on Stack Overflow

angular not displaying object inside array of object

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related