Angular object undefined

Question

In my angular project, I have the following:

TS

this.storage.get(item_section).then((value) => {
    this.item= value;
    console.log(this.item); //The console log gives `["name","item","size"]`
    console.log(this.item[1]); //Gives `item` as the console log
});

HTML

<div class="something">{{item}}</div> //Displays "name,item,size"
<div class="something">{{item[1]}}</div> //Gets Undefined error

If I can define the this.item and get results for {{item}}, how come I get undefined error for {{item[1]}}?

I am little confused to how to fix this

`item` is only assignable when the async operation finishes. You can use something like this in component: `this.item = this.storage.get(item_section);` and in template: `
{{resolvedItem[1]}}
` — developer033, Jun 20 '17 at 05:17
If you want to know why it happens, you can see [**this question**](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron#23667087). — developer033, Jun 20 '17 at 05:25
@developer033 Thank you! I was looking through some forums to see why it was the case. Much appreciated guys!=) — Steve Kim, Jun 20 '17 at 05:27

Jayakrishnan · Accepted Answer · 2017-06-20T05:59:58.047

4

Your operation is async, so you need to wait for the item to be loaded to access the second element of the item. You can use *ngIf to achieve it.

<div class="something" *ngIf="item">{{item[1]}}</div>

edited Jun 20 '17 at 05:59

answered Jun 20 '17 at 05:19

Jayakrishnan

4,232
2
23
35

1

*"...to be loaded to access the first element..."* In fact, he doesn't want to access the **first** element, but the second :) – developer033 Jun 20 '17 at 05:27

Sriram Jayaraman · Answer 2 · 2017-06-20T05:37:57.590

3

Simply add a '?' next to your array item, it should work fine. Refer Safe Navigation Operator for displaying data if exists.

edited Jun 20 '17 at 05:37

answered Jun 20 '17 at 05:21

Sriram Jayaraman

800
1
8
15

2

It's called `Safe Navigation Operator`. – developer033 Jun 20 '17 at 05:22
1

Hmm, I just remembered that the `Safe Navigation Operator` doesn't support this kind of situation (I mean bracket notation)... if you try: `item?[1]` you'll get a "Template parse errors...". – developer033 Jun 20 '17 at 05:43
Yes, I just checked it out myself. It throws a template parse error. – Sriram Jayaraman Jun 20 '17 at 05:54
@developer033 I think a ternary operator would work just fine in this case :) `item[1]?item[1]:''` – Sriram Jayaraman Jun 20 '17 at 09:25
No, it won't work also, it still produces error, you can do: `{{ item ? item[1] : '' }}`. – developer033 Jun 20 '17 at 18:02
I tried implementing both of our approaches and both of them are working :) – Sriram Jayaraman Jun 21 '17 at 05:18
The original problem in question is that `item` is **undefined**, so the last approach that you suggested (`item[1]?item[1]:''`) won't work because you're trying to access [1] from undefined... actually you're trying to do something like this: `undefined[1] ? undefined[1] : ''`. – developer033 Jun 21 '17 at 05:19
I understand your predicament and what you are conveying makes sense. But I am still trying to figure out why that actually worked :P What I did was assign a variable : `public sample: string[]` and put up a binding in the DOM like `{{sample[0]?:sample[0]:''}}` and it isn't producing any error while compiling. – Sriram Jayaraman Jun 21 '17 at 05:25

score 1 · Answer 3 · answered Jun 20 '17 at 05:17

1

It should work for the static data, it works fine here.

Check the DEMO

Alternatively since your code is asynchronous, you can try this,

<div class="something">{{item && item[0]}}

answered Jun 20 '17 at 05:17

Sajeetharan

216,225
63
350
396

score 1 · Answer 4 · answered Jun 20 '17 at 05:30

1

please try below:

<div class="something" *ngFor="let itm of item | async">{{itm}}</div>

answered Jun 20 '17 at 05:30

rajeev

64
5

Angular object undefined

4 Answers4