Angular array: ERROR TypeError: Cannot read property of undefined

Question

I am trying to display information from a web service but am getting the following error "ERROR TypeError: Cannot read property 'bu' of undefined". However the data that I wish to display is showing correctly. Here is a copy of the web service response and code.

{
    "bu": [
           {
            "id": 1,
            "bcluster": "R03 - Information Technology",
            "bsector": "P20 - CA SA",
            "bgroup": "319 - ITM as a Service (passthrough)",
            "bunit": "-"
           },
           {
            "id": 2,
            "bcluster": "R03 - Information Technology",
            "bsector": "Q04 - Information Management & Applications",
            "bgroup": "P36 - Softworks",
            "bunit": "001 - Softworks Licence & Maintenanc"
           }
         ]
}

HTML

  <ul class="list-group"  *ngFor="let item of vals.bu">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <button type="button" class="btn btn-info">{{item.id}}</button>
        <input type="text" class="input-group btn btn-light" [(ngModel)]="item.bunit">
      <button type="button" class="btn btn-primary">Update</button>
    </li>
  </ul>

TS

  ngOnInit(): void {
    this.http.get<DataResponse>(this.api.getBU()).subscribe(data => {
      this.vals = data;
    });
  }

Sajeetharan · Accepted Answer · 2018-06-07 04:28:17Z

4

You need to use safe navigation operator or *ngIf inorder to handle the delay of response from your asynchronous request,

 <button type="button" class="btn btn-info">{{item?.id}}</button>
        <input type="text" class="input-group btn btn-light" [(ngModel)]="item?.bunit">
      <button type="button" class="btn btn-primary">Update</button>
    </li>

EDIT

As mentioned in the comment, handle the null in your ngFor and remove it in the ngModel

<ul class="list-group"  *ngFor="let item of vals?.bu">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <button type="button" class="btn btn-info">{{item.id}}</button>
        <input type="text" class="input-group btn btn-light" [(ngModel)]="item.bunit">
      <button type="button" class="btn btn-primary">Update</button>
    </li>
</ul>

edited Jun 7, 2018 at 4:28

answered Jun 7, 2018 at 4:12

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

10 Comments

RRB Over a year ago

Thanks but I get this error ''[Angular] Parser Error: The '?.' operator cannot be used in the assignment at column 13 in [item?.bunit=$event]

Sajeetharan Over a year ago

remove it from ngModel

Sajeetharan Over a year ago

*ngFor="let item of vals?.bu">

Amit Chigadani Over a year ago

@eohdev I have answered that. Please check.

Amit Chigadani Over a year ago

Why didnt you add that in your answer first. That comment came only after my answer.

|

Amit Chigadani · Accepted Answer · 2018-06-07 04:16:06Z

You should use safe navigation operator for vals?.bu. Because you are getting vals asynchronously.

<ul class="list-group"  *ngFor="let item of vals?.bu">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <button type="button" class="btn btn-info">{{item.id}}</button>
        <input type="text" class="input-group btn btn-light" [(ngModel)]="item.bunit">
      <button type="button" class="btn btn-primary">Update</button>
    </li>
  </ul>

Collectives™ on Stack Overflow

Angular array: ERROR TypeError: Cannot read property of undefined

2 Answers 2

10 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Related