How to use value from Observable inside TypeScript component | Angular 4

Question

I'm trying to get a JSON value I got from an API and set it inside a variable, for example:

TS

this.graphicService.getDatas().subscribe(datas => {
    this.datas = datas;
    console.log(datas);
});

test = this.datas[0].subdimensions[0].entry;

HTML

{{test}}

it returns an error on console:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'subdimensions' of undefined
TypeError: Cannot read property 'subdimensions' of undefined
    at new GraphicsComponent (graphics.component.ts:33)...

However, It does work if I use directly on HTML like this:

{{datas[0]?.subdimensions[0].entry}}

The data is printed correctly then. ..

Possible duplicate of Angular 2 - Return data directly from an Observable — jonrsharpe
– jonrsharpe, Commented Sep 21, 2017 at 21:45
The whole point of subscribing to an observable is that the data is resolved asynchronously. It will not be there immediately, but you have no "safe navigation" (the ? in the template) in the TypeScript. — jonrsharpe
– jonrsharpe, Commented Sep 21, 2017 at 21:45
@jonrsharpe how do I do safe navigation inside TypeScript? when I just type the "?" there it does bring some errors. — Gustavo
– Gustavo, Commented Sep 21, 2017 at 21:48
Use if, or a ternary expression, or just access it from inside the subscription callback. — jonrsharpe
– jonrsharpe, Commented Sep 21, 2017 at 21:49

Melchia · Accepted Answer · 2017-09-21 21:55:01Z

2

Try this:

let test;
this.graphicService.getDatas().subscribe(datas => {
    this.datas = datas;
    console.log(datas);
    test = this.datas[0].subdimensions[0].entry;
});

answered Sep 21, 2017 at 21:55

Melchia

24.5k23 gold badges110 silver badges130 bronze badges

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

2 Comments

Gustavo Over a year ago

Cool, it worked. But now how can I use this variable as a value inside TS? for example: somedata: [ test, test2... ]. I tried this.test but it does not return as expected

Melchia Over a year ago

I advise to put all the code you want to execute once the array datas is full in the subscribe method. Another solution is to create another function for the somedata and execute it with a separate event

Collectives™ on Stack Overflow

How to use value from Observable inside TypeScript component | Angular 4

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related