Http request in forEach function. Angular2

Question

Having problem with using forEach function with http requests.

I have a _watchlistElements variable, which holds following data:

[{"xid":"DP_049908","name":"t10"},{"xid":"DP_928829","name":"t13"},{"xid":"DP_588690","name":"t14"},{"xid":"DP_891890","name":"t16"},{"xid":"DP_693259","name":"t17"}]

Now, Im making a function which will download data from server for each of these xid elements:

private download() {
  this._watchlistElements.forEach(v => 
  this.http.get('http://localhost:8080/getValue/' + v.xid)
  .subscribe(res => this._values = res.json()));
}

It has to download data as object for every v.xid value and store it inside the _values variable.

private _values: Array<WatchlistComponent> = [];

But somehow, angular returns an error with v.xid element. It doesn't see that variable. But it's kinda strange, because when I do it just in console, I mean: store that json inside a variable and use forEach function on this v.xid elements, everything works well.

ERROR in [default] C:\Users\src\app\appBody\watchlist\watchl ist.component.ts:51:115 Property 'xid' does not exist on type 'WatchlistComponent'.

The xid exists... but inside the _watchlistElements which downloads the data asynchonously...

I'm not 100% sure this method is right, but if you have any ideas how to fix it, please tell me.

Community · Accepted Answer · 2017-05-23 12:02:06Z

0

What happens when you print out the _values array?

The error above is a type error. What does the WatchlistComponent interface look like? Does it include an xid property?

You can get around the type error by overriding the type like...

private download() {
  this._watchlistElements.forEach((v as any) => 
  this.http.get('http://localhost:8080/getValue/' + v.xid)
  .subscribe(res => this._values = res.json()));
}

As far as helping you structure your code better. If you want to combine the result of many Observables, I would use something like forkJoin.

private download():void {
  //create an array of Observables
  let el$ = _watchlistElements.map(el => {
    return this.http.get('http://localhost:8080/getValue/' + el.xid)
             .map(res: Response => <any>res.json());
  });

  //subscribe to all, and store the data, el$ is an array of Observables
  Observable.forkJoin(el$).subscribe( data => {
    this._values = data; //data will be structured as [res[0], res[1], ...]
  });
}

HERE is a Plunker with the above method working. https://plnkr.co/edit/woXUIDa0gc55WJPOZMKh?p=preview

Related: angular2 rxjs observable forkjoin

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Dec 9, 2016 at 14:36

joshvito

1,57320 silver badges25 bronze badges

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

5 Comments

user7209780 Over a year ago

If I fix my code as you wrote, I'm getting 4 errors. = expected, can't find name as, , expected and xid does not exist on WatchlistComponent. What do you mean by printing _values array? Do you mean console.log? I don't have any interfaces inside the WatchlistComponent.

joshvito Over a year ago

yes, console.log(this._values) ; Is line 51 of watchlist.component.ts this.http.get('http://localhost:8080/getValue/' + v.xid) ?

user7209780 Over a year ago

I bet console.log won't work because of asynchronous request. And about your question, yes, it looks like you have written.

user7209780 Over a year ago

This stuff which you have written as edit, is kinda madness and it doesn't work :(

joshvito Over a year ago

@H.Doe I added a Plunker to illustrate the method.

Collectives™ on Stack Overflow

Http request in forEach function. Angular2

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related