Angular 5 - Ionic 3 cannot fetch object by key

Question

I am using Angular 5 with Ionic 3. My main problem is that I cannot get the second key object of the object's name "myObj". Below are 2 examples that I have tried so far.

Example 1

home.ts:

...
export class HomePage {
myObj: any ={};

ionViewDidLoad() {
    this.myObj = {
        something: {value: 'value', name: 'name'}
      }
  }
}

home.html:

...
<p>{{myObj.something.name}}</p>

In this case I cannot get name but I can get

<p>{{myObj.something}}</p>

Why is that?

Example 2

home.ts:

...
export class HomePage {
myObj: {something: {value: string, name: string}};

ionViewDidLoad() {
    this.myObj = {
        something: {value: 'value', name: 'name'}
      }
  }
}

home.html:

...
<p>{{myObj.something | json}}</p>

In this example I cannot even get my first level key something.

All above examples shows me in the screen:

cannot read property * of undefined

* depends on property name ex. something or name

Possible duplicate of Angular2: Cannot read property 'name' of undefined — Igor
– Igor, Commented Mar 1, 2019 at 10:37

Nithya Rajan · Accepted Answer · 2019-03-01 10:32:59Z

4

Try using ? operator

<p>{{myObj?.something?.name}}</p>

Because you are not initialized the myObj with an empty object. If you initialize it as follows, the ? operator is not needed.

export class HomePage {
myObj: {something: {value: string, name: string}} = { something: {}};

ionViewDidLoad() {
    this.myObj = {
        something: {value: 'value', name: 'name'}
      }
  }
}

edited Mar 1, 2019 at 10:32

answered Mar 1, 2019 at 10:29

Nithya Rajan

4,93422 silver badges34 bronze badges

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

Comments

playerone · Accepted Answer · 2019-03-01 10:42:45Z

1

Try not to access your object in Template, Can you display values onClick button?

If you want to access in template, initialize variable in constructor not in ionViewDidLoad. Did you try to replace ionViewDidLoad with constuctor() ?

answered Mar 1, 2019 at 10:42

playerone

1,1274 gold badges26 silver badges48 bronze badges

1 Comment

Vasilis Greece Over a year ago

no I didn't but now I found a solution, I will work in both ways now!

Collectives™ on Stack Overflow

Angular 5 - Ionic 3 cannot fetch object by key

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related