How get objects in an observable array after a http request in typeScript?

Question

This is my .ts :

import {Observable} from 'rxjs';

variable = Number();
myObservableArray : Observable<any[]>;

OnClickFunction(){

    this.myObservableArray = this.httpClient.get<any[]>("http://myUrl/?lbs="+this.variable,{responseType: 'json'});

console.log(this.myObservable.Array)

I can see the json array in the html but I don't manage to get the objects inside in the .ts!

typo? console.log(this.myObservable.Array) -> console.log(this.myObservableArray). Also, you aren't subscribing to the get function in the ts, so if you are seeing it in the 'html', are you using the async pipe there? — peinearydevelopment
– peinearydevelopment, Commented Jun 24, 2020 at 15:29
Yes I think, this is my html: <ion-item *ngIf="this.mainLeftDec | async as array"> {{ array| json }} </ion-item> and it work, I see all the objects of json. But I don't manage to work with the objects in the .ts — Patrice Blanchard
– Patrice Blanchard, Commented Jun 24, 2020 at 15:43

peinearydevelopment · Accepted Answer · 2020-06-24 15:51:07Z

As is, you won't see anything your array in the console.log. That is for a few reasons. this.myObservableArray is an Observable of type any[]. At most currently, you will see the Observable wrapper in your console, but not the array. Observables are asynchronous, so the line this.myObservableArray = this.httpClient... is setting up the http call to run, but until the Observable returned from that method is subscribed to, the http call won't actually occur. The best way to update your code to see the array from the ts file would be as follows:

import {Observable} from 'rxjs';
import {tap} from 'rxjs/operators';

variable = Number();
myObservableArray : Observable<any[]>;

OnClickFunction(){

    this.myObservableArray = this.httpClient.get<any[]>("http://myUrl/?lbs="+this.variable,{responseType: 'json'}).pipe(tap(arr => console.log(arr)));

The | async (or AsyncPipe) will handle subscribing to and unsubscribing from that Observable. The operator tap will allow you to see the array from the ts file without modifying it at all.

Collectives™ on Stack Overflow

How get objects in an observable array after a http request in typeScript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related