Can't access an array within my object

Question

I'm a bit of a newbie on Angular (moving from AngularJS)

I have a call I'm making to an api that returns an object with a subdocument (array).

The object returned from the api is basically:

contact:{
  first_name:'Bob',
  last_name:'smith',
  phones:[
    {
      phone_number:'222-222-2222'
      phone_type:'home'
    },
    {
      phone_number:'333-333-3333'
      phone_type:'mobile'
    },
  ]
}

In my html I can call {{contact.first_name}}

But if I try to do a '*ngFor' like this:

*ngFor="let phone of contact.phones"

I get a compilation error saying it can't find 'phones' of 'undefined'.

This does not make senes to me, as I know 'contact' is not undefined and I can see that the full object is returned.

What am I missing?

Sajeetharan · Accepted Answer · 2018-02-16 01:45:59Z

1

Since you are requesting from api with asynchronous call, you need to use *ngIf or use safe navigation operator to make sure data is available

*ngFor="let phone of contact?.phones"

answered Feb 16, 2018 at 1:45

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

1 Comment

cnak2 Over a year ago

Thanks, Sajeetharan. I figured it out two minutes after I submitted the post. But this may help other. I'll accept your response as soon as the waiting period is over. Thanks again!

Collectives™ on Stack Overflow

Can't access an array within my object

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related