Error accessing nested array of objects in Typescript

Question

I'm trying to consume json coming from a webapi. When debugging, the data is coming through correctly as per picture below:

Surprisingly when I try to loop through the objects in the report.subreport array, I get told it's undefined:

getReports() {
    console.log('Get Reports');
    this.staticEventsService.getReports().subscribe((rep) => {
      this.reports = rep as Report[];
      // eslint-disable-next-line no-debugger
      debugger;
      this.reports.forEach(r => {
        r.subreport.forEach(s => { console.log('subreport = ' + s.categoryId);});});
      console.log('show me the god damn reports = ' + this.reports);
    });

I've declared these classes to deal with the incoming data:

export class Report {
  month: number;
  subreport: SubReport[];
  };

export class SubReport {
  categoryId: number;
  occurrences: number;
}

Arun Kamalanathan · Accepted Answer · 2021-06-16 00:21:09Z

1

Javascript is case sensitive. I see that you used subreport and it should be subReport with a capital R.

answered Jun 16, 2021 at 0:21

Arun Kamalanathan

8,6114 gold badges29 silver badges43 bronze badges

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

1 Comment

Pablo Aguirre de Souza Over a year ago

What a waste of 5 hours of my life.🤭

hoangdv · Accepted Answer · 2021-06-16 00:23:42Z

1

Error came from ‘r.subreport.forEach’.Following your debug image, It should be ‘r.subReport.forEach’ (R instead of r).

I guess you have to update your Report type, or update the service response to match with your Report type.

answered Jun 16, 2021 at 0:23

hoangdv

16.3k4 gold badges31 silver badges54 bronze badges

Collectives™ on Stack Overflow

Error accessing nested array of objects in Typescript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related