Question

119

RxJS Observable returning array, run another function with each array iteration

rated 0 times [ 122] [ 3] / answers: 1 / hits: 17747 / 8 Years ago, thu, june 23, 2016, 12:00:00

I have a function getNews(), which basically returns angular's http.get request. Result of request is array of Id's. I would like to iterate through this array I got and run another http.get request (function getItem(id)), which will then return single Id's object, received from server.

I've tried using it like so:

  getLatest() {

    return this.http.get('all_news_url')

    .map(res => res.json())

    // I even tried creating Observable from array and get only 5 elements

    //.map(res => Observable.from(res.json()))

    //.take(5)

    .map((data) => this.getItem(data))

    .subscribe(

      data => {

        console.log(data);

      }

    )

  }



  getItem(itemId: any): Observable<any> {

    console.log('item id', itemId);



    return this.http.get(this.generateUrl(`item/${itemId}`))

    .map(res => res.json());

  }

Obviously, this doesn't work. parameter to getItem() function always gets passed as whole array of Id's.

Thank you everyone for participating in this question.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

malkajillc

Add To Favorites

Follow

Total Points: 652

Total Questions: 107

Total Answers: 98

Location: Finland

Member since Sat, Nov 6, 2021

3 Years ago

malkajillc questions

1 Vitest mock modules function in only one test and use the actual function in others

Wed, Nov 2, 22, 00:00, 2 Years ago

1 How to change PrismaClient database connection at runtime?

Tue, Jun 29, 21, 00:00, 3 Years ago

1 How do I add the axios package to my chrome extension I'm working on?

Tue, Dec 15, 20, 00:00, 4 Years ago

1 How to make a bot ping a user using discord.js

Fri, Aug 21, 20, 00:00, 4 Years ago

1 TypeError: Cannot read property 'v4' of undefined

Tue, Aug 11, 20, 00:00, 4 Years ago

View All

answered 8 Years ago bradford · Accepted Answer

You probably want to use the concatMap operator instead of map. concatMap flattens the returning Observable to the source Observable, while map returns an observable of observable.

If you want data from getItem() to be in the same order listed in 'all_news_url', you could try something like

this.http.get('all_news_url')

.concatMap(res => Observable.from(res.json()).take(5))

.concatMap((data) => this.getItem(data))

.subscribe(

  data => {

    console.log(data);

  }

);

With the above code, the calls to getItem() will be synchronous, i.e there will only be one request to 'item/${itemId}' at a time, and in order

If you don't care about the order and want to speed them up by sending multiple requests at a time, change the second concatMap to mergeMap. Note that the requests (to item/itemId) will still be in order but there is no guarantee about the responses' order. You can supply the maximum concurrent requests as the third parameter to mergeMap (ignoring the second parameter by passing undefined or null).

.concatMap(res => Observable.from(res.json()).take(5))

.mergeMap((data) => this.getItem(data), null, 3)

passing 1 as the third parameter of mergeMap would be equivalent to concatMap