Angular giving TypeError: “Cannot read property 'id' of undefined”

Question

I am trying to get documents based on id of the respective form "TypeError: Cannot read property 'id' of undefined" error is coming in the response: The html for button click is as follows:

                <div class="form-group row">
                <div class="col-md-12" style="text-align: center;">
                  <button (click)="onNext(i)" type="submit" class="btn btn-primary shadow" style="float: right;">NEXT</button>
                </div>
            </div>

and my respective .ts file is as shown below:

import { Component, OnInit } from '@angular/core';
import { UsersService } from 'src/app/services/users.service';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-admin-higherstudies-form',
  templateUrl: './admin-higherstudies-form.component.html',
  styleUrls: ['./admin-higherstudies-form.component.scss'],
  providers: [UsersService]
})
export class AdminHigherstudiesFormComponent implements OnInit {
  formData: any[];
  constructor(private userService: UsersService, private router: Router, private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    let formId = this.activatedRoute.snapshot.paramMap.get('formId');
    this.userService.gethigherStudiesFormList(formId).subscribe(
      response => {
        this.formData = response;
        console.log(response);
      }
    );
  }

  logout() {
    return this.userService.logout();
  }
  Back() {
    this.router.navigate(['/admin-higher-studies']);
  }

  onNext(i) {
    let path = '/admin-higherstudies-documents' + this.formData[i].id;
    this.router.navigate([path]);
  }
}

My service code is as follows:

  gethigherStudiesphdDocumentsList(formid): Observable<any> {
const httpoptions = {
  headers: new HttpHeaders({ 'Authorization': 'token ' + localStorage.getItem('token') })
};
return this.http.post('http://127.0.0.1:8000/api/higher-studies-phd-documents/' + formid + '/', httpoptions);

}

When I try to use ngFor in my button div class as mentioned in the code:

                <div class="form-group row">
                <div class="col-md-12" *ngFor="let data of formData index as i" style="text-align: center;">
                  <button (click)="onNext(i)" type="submit" class="btn btn-primary shadow" style="float: right;">NEXT</button>
                </div>
            </div>

The error I am receiving is Cannot find a differ supporting object '[object Object]' of type 'Name'. NgFor only supports binding to Iterables such as Arrays.

Francisco Santorelli Francisco Santorelli · Accepted Answer · 2019-03-20T19:03:18

it's because your template is trying to access formData before it actually has value, because asynchronous tasks have to be awaited before running or errors will pop.

add <div *ngIf="formData> to a parent div, and this way you tell angular to wait formData to get value before rendering the HTML, therefore, awaiting the async method.

Other ways to do this could be passing the Observable directly (no .subscribe needs to be called) to the DOM, and using the async pipe as such

let data of (formData |async) index as i and in your component simply make formData be the observable

note:

also, you could use location.back() to return to the previous url instead of creating a routing method. I know, off topic, but just to let u know!

edit:

also another thing to note... usually when you get the 'cannot read property of undefined' error, it usually means it tried to either access something that doesn't exist (typos come to mind), or trying to access something before it exists!

Angular giving TypeError: “Cannot read property 'id' of undefined”

2 Answers