Cannot read property 'commitment_id' of undefined

Question

I have a page that opens on such a routing commitments/:id. And I want to display the dates of reports belonging to this particular page, by id. But I get an message that it is impossible to read the property "commitment_id":

ERROR TypeError: Cannot read property 'commitment_id' of undefined

at eval (commitment.component.ts:88)

at Array.filter ()

at SafeSubscriber.eval [as _next] (commitment.component.ts:87)

at SafeSubscriber.__tryOrUnsub (Subscriber.js:239)

at SafeSubscriber.next (Subscriber.js:186)

at Subscriber._next (Subscriber.js:127)

at Subscriber.next (Subscriber.js:91)

at CatchSubscriber.Subscriber._next (Subscriber.js:127)

at CatchSubscriber.Subscriber.next (Subscriber.js:91)

at MapSubscriber._next (map.js:85)

ts:

    commitments: Array<Commitment>;
    selectedCommitment = null;
    reportingDates: Array<ReportingDate>;
    filteredReportingDates = [];
    id: number;
    routeId: any;
    public errorMsg;

    ngOnInit() {
        this.routeId = this.route.params.subscribe(
          params => {
            this.id = +params['id'];
          }
        )
        let commitmentRequest = this.route.params
          .flatMap((params: Params) =>
            this.servCommitment.getCommitment(+params['id' ]));
        commitmentRequest.subscribe(response => this.commitment = response.json(), error => this.errorMsg = error);

    }

  @Input() commitment: Commitment;

    onSelectedReportingDate(commitmentId) {
        this.selectedCommitment = this.commitments.find(
          (el) => {
            return el.commitment_id === commitmentId
          }
        );
    
        this.servReportingDate.getReportingDates().subscribe(
          reportingDate => {
            this.reportingDates = reportingDate;
            this.filteredReportingDates = this.reportingDates.filter(
              (reportingDate) => reportingDate.l_commitments_id === this.selectedCommitment.commitment_id
            );
          }
        );
    }

html:

<div *ngIf="commitment">
 <button type="submit" class="btn btn-info btn-simple" (click)="onSelectedReportingDate(commitment.commitment_id)">Test</button>
  <div *ngIf="selectedLiability">
   <div *ngFor="let reportingDate of filteredReportingDates">
        {{ reportingDate.reportingdate_plan }}
   </div>
  </div>
</div>

line 87-88-89:

  this.filteredReportingDates = this.reportingDates.filter(
    (reportingDate) => reportingDate.l_commitments_id === this.selectedCommitment.commitment_id
  );

What is the code present at line no 88 commitment.component.ts:88. Highlight that also — Sivakumar Tadisetti
yes, the code provided is fine, error must be in commitment.component.ts:88 — tommueller
@user10471254 issue might be after this.selectedCommitment = this.commitments.find( line. can you do console.log(this.selectedCommitment) after find? and check the console — Sivakumar Tadisetti
I see nowhere that you actually set any value for this.commitments, so when trying to do a find for that array, selectedCommitment would be undefined there and when you are on line 88 trying to read the commitment_id of selectedCommitment it's undefined. — AJT82

Sachila Ranawaka Sachila Ranawaka · Accepted Answer · 2018-10-09T10:55:41

Check the commitment_id exist in the variable

(reportingDate) => this.selectedCommitment && (reportingDate.l_commitments_id === this.selectedCommitment.commitment_id)

Cannot read property 'commitment_id' of undefined

2 Answers