Why does this *ngFor object list only have some values and not others?-CodePudding

I have a MEAN app I'm working on. In the backend we have the mongoDB collections users, resumes, experiences. These build off each other so users have resumes, resumes have experiences. There is also an API that does various tasks like add resume, add experience, get all experiences, etc.

In the front end, I'm using angular and node (along with bootstrap) to display the info and add GUI functionality. So I have this code in the experience model:

class ExperienceModel {
    _id!: string;
    _userId!: string;
    _resumeId!: string;
    employer!: string;
    monthStart!: string;
    yearStart!: string;
    monthEnd!: string;
    yearEnd!: string;
    title!: string;
    description!: string;
}

export default ExperienceModel;

and in the main component screen ts file I declare experiences: ExperienceModel[] = []; and in ngOnInit this block of code:

if (this.userId && this.resumeId) {
          this.experienceService.getExperiences(this.userId, this.resumeId).subscribe(
            (allExperiences: ExperienceModel[]) => { this.experiences = allExperiences }
          );
        }

Finally in the html file for the main component screen, I have this *ngFor loop populating a list:

<a style="cursor: pointer" 
   *ngFor="let experience of experiences"
   class="list-group-item d-flex justify-content-between align-items-center">
       {{ experience }}
   <span (click)="deleteExperience(experience)" class="badge bg-danger rounded-pill">x</span>
</a>

NOW, the problem is, the list is displaying two things, each of which look like [Object object] though there are three experience files in the collection. In addition to that, if I type something like {{ experience._id }} or _userId or _resumeId it works, and if I type something like {{ experience.title }} or employer or description it's just showing two empty boxes. I have tested the API call with insomnia and there are three files coming back in the response. Let me know if there's anything else you need to know, appreciate the help.

EDIT 1: Here is the JSON from the API retrieved in Insomnia:

[
  {
    "_id": "61841026178ac959d07f80df",
    "_userId": "61705675ab8731ad3a794751",
    "_resumeId": "617057308799dd688b117ce3",
    "employer": "Some company",
    "monthStart": "03",
    "yearStart": "2021",
    "monthEnd": "06",
    "yearEnd": "2021",
    "title": "Director of Awesome",
    "description": "Coolest guy on staff, had to make sure everyone else was cool too",
    "__v": 0
  },
  {
    "_id": "6184119e178ac959d07f810f",
    "_userId": "61705675ab8731ad3a794751",
    "_resumeId": "617057308799dd688b117ce3",
    "employer": "Some other company",
    "monthStart": "05",
    "yearStart": "2020",
    "monthEnd": "09",
    "yearEnd": "2020",
    "title": "Director of Cool",
    "description": "Phatest b-boi on staff, had to make sure everyone was kicking it with funky rythms",
    "__v": 0
  },
  {
    "_id": "618411cd178ac959d07f8112",
    "_userId": "61705675ab8731ad3a794751",
    "_resumeId": "617057308799dd688b117ce3",
    "employer": "test",
    "monthStart": "05",
    "yearStart": "2020",
    "monthEnd": "09",
    "yearEnd": "2020",
    "title": "Director of Cool",
    "description": "Phatest b-boi on staff, had to make sure everyone was kicking it with funky rythms",
    "__v": 0
  }
]

and here's what I'm seeing through the API link in my browser:

[{"_id":"61718f3e0624ec1944bde7fa","_userId":"61705675ab8731ad3a794751","_resumeId":"6170b39b0624ec1944bde78b","experience":{"monthStart":"10","yearStart":"2020","monthEnd":"03","yearEnd":"2021","title":"Director of Cool","description":"Coolest guy on staff, had to make sure everyone else was cool too"},"__v":0},{"_id":"61718f510624ec1944bde7fc","_userId":"61705675ab8731ad3a794751","_resumeId":"6170b39b0624ec1944bde78b","experience":{"monthStart":"03","yearStart":"2021","monthEnd":"06","yearEnd":"2021","title":"Director of Awesome","description":"Coolest guy on staff, had to make sure everyone else was cool too"},"__v":0}]

CodePudding user response：

Thanks for adding the JSON you receive.

Based on that, you get two objects which is correct.

When you print {{ experience }} that is an object javascript will render as [Object object]. You can see all the content with the json pipe {{ experience | json }}

And the last point, why some fields are not shown... again it is answered on the JSON you receive: the structure is different from what you're expecting.