Can't access object property in angular

Question

I am trying out angular, I have a home component that displays a list of countries, I want to display more information about the country in a detail view.

I can actually see the data when I pipe it to json in the template but can't access properties of the object.

in the home.html I have

<ion-list>
  <ion-item *ngFor="let country of countries">
     <ion-avatar item-start>
        <img [src]="country.flag" />
     </ion-avatar>
     <h5>{{country.name}}</h5>
     <p>{{country.exchange_count}} Exchanges</p>
     <button ion-button primary outline item-end (click)="about(country)">View</button>
  </ion-item>
</ion-list>

home.ts

about(country){
  console.log(typeof(country))
  this.navCtrl.push(AboutPage, {country:country})
}

about.ts, the country's name is printed on the console

ionViewDidLoad () {
  this.country = this.navParams.get('country');
  console.log(this.country.name);
}

about.hmtl, here is where doing something like country.name raised an error can't access property name of undefined but when I do as below, the dumped data shows on the page.

<ion-content>
    {{country | json}}
    <!-- {{country.name}} -->
</ion-content>

on the about.html page, here is the result when piped into json, I trimmed the data for brevity

 {"id":"1","name":"Ghana","iso_code":"GHS","currency":"GHS",
"exchange_count":1}

I have tried several things, what am I missing?

it dumps the actual country object that was passed. Let me update the question with it — Bernard 'Beta Berlin' Parah
– Bernard 'Beta Berlin' Parah, Commented Jun 27, 2018 at 10:38
Try {{ country?.name }} - that'll make country optional, and not fail if it's not there. If it comes in at a later time, it'll read the property. The json pipe is fail safe to undefined inputs, which is why it seems to work better. — Thor Jacobsen
– Thor Jacobsen, Commented Jun 27, 2018 at 10:39
View is being generated before ionViewDidLoad method, therefore variable is still not initialized. Initialize it with an empty values in the constructor of your AboutPage. Something like constructor() { public const country = {name:''}} — Vadim Aidlin
– Vadim Aidlin, Commented Jun 27, 2018 at 10:40

Sajeetharan · Accepted Answer · 2018-06-27 10:45:02Z

7

Try to use safe navigation operator or ngif to verify the object is present , or you can initialize the country object as well.

<ion-content>
     {{country?.name}} 
</ion-content>

or

constructor() { public const country = {name:'',... etc}};

answered Jun 27, 2018 at 10:45

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

3 Comments

Bernard 'Beta Berlin' Parah Over a year ago

thank you! same solutions provided in the comments, can confirm it works.

Sajeetharan Over a year ago

oh yeah! i did not look at the comments though!

Demodave Over a year ago

Been searching like an hour for the dumb '?'. Thanks

Tsvetoslav Tsvetkov · Accepted Answer · 2022-10-03 13:30:50Z

0

I had the same issue. I had an object(home) that has two properties id and name When I tried to access them in the HTML, the console logged me following error

ERROR TypeError: Cannot read properties of undefined (reading 'id')

So I had to add *ngIf element to verify the object is present.

 <table class="table" *ngIf="homeToDelete">
  <thead>
      <tr>
          <th class="left">{{labels.id}}</th>
          <th>{{labels.name}}</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td class="left">{{homeToDelete.id}}</td>
          <td>{{homeToDelete.name}}</td>
      </tr>
    </tbody>
</table>

answered Oct 3, 2022 at 13:30

Tsvetoslav Tsvetkov

1,2361 gold badge13 silver badges31 bronze badges

Collectives™ on Stack Overflow

Can't access object property in angular

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related