Processing nested data model in angular

Question

I am trying to display member's education and work experience using Angular. The code i tried is here: i am getting neither error nor displaying the data. i am sure that i am lost but i hope someone out there will help me.

Thanks for you help.

 <tr *ngFor="let member of members">
                  <td>{{ member.firstName }}</td>
                  <td>{{ member.lastName }}</td>
                  <td>{{ member.gender?.genderName }}</td>
                  <td>{{ member.description }}</td>
    </tr>
  <tr *ngFor="let edu of member.educations">
                  <td> {{edu?.schoolName}} </td>
                  <td>Studiespesialisering</td>
                  <td>{{ edu?.startDate | date }}</td>
                  <td> {{ edu?.endDate | date }}  </td>
  </tr>

export class Member {
    id:number;
    firstName: string;
    lastName: string;
    email:string;
    gender: Gender;
    interests: Interest; 
    workexperiences: Work [];
    educations: Education[]; 
}

export class Education{
  educationsId?: number;
  schoolName: string;
  studyCity: string;
  degreeId: number;
  startDate: string;
  endDate: string;
}

export class Work {
  workExperiencesId?:number;
  jobTitle: string;
  companyName: string;
  industry: Industry;
}

The second tr block should be part of the first loop otherwise member doesn’t exist..? — MikeOne
– MikeOne, Commented Mar 29, 2022 at 20:20

Luiz Avila · Accepted Answer · 2022-03-30 00:36:45Z

1

Not sure if this is what you want since your code is super incomplete but here you go:

https://stackblitz.com/edit/angular-ivy-ekfp7n?file=src/app/app.component.ts

Got some version of the code running so you can see it as an example.

EDIT: Updated the blitz with the header. This is something that I came up quickly and would not super performatic, because I do 1 for for each cell in the education side. Maybe using an accordion or something for the education part would be better

edited Mar 30, 2022 at 0:36

answered Mar 29, 2022 at 18:40

Luiz Avila

1,3769 silver badges7 bronze badges

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

4 Comments

Zizu Over a year ago

Thanks so much @Luiz that is the way i wanted it. but is that possible to have the Education title for all users insted of having one for each ?

Luiz Avila Over a year ago

yes of course, I will update it

Luiz Avila Over a year ago

Do you actually want the education inside the cells with multiple entries, something like this? Aligning this that is the issue i.imgur.com/S43Qz3u.png

Zizu Over a year ago

Exactly, Luiz. I thank you so much.

Collectives™ on Stack Overflow

Processing nested data model in angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related