Angular 2 & RxJS: map an array using Rx Observable

Question

I have an array of numbers like this: [1, 2, 3], and HTTP service that has function to load data object by number like this:

function get(id: number): Observable<object>

How to map my original array of numbers to array of objects preserving order of elements?

martin · Accepted Answer · 2016-11-27 10:02:08Z

2

You can use concatMap operator.

const Observable = Rx.Observable;

function mockHttpRequest(i) {
  return Observable.of(i).delay(500);
}

Observable.from([1, 2, 3])
    .concatMap(i => mockHttpRequest(i))
    .subscribe(data => console.log(data));

This simulates multiple HTTP requests where each one is delayed by 500ms. Operator concatMap() guarantees that the Observables will becalled in order.

See live demo: https://jsbin.com/subuxo/edit?js,console

edited Nov 27, 2016 at 10:02

answered Nov 27, 2016 at 9:16

martin

97.4k26 gold badges205 silver badges237 bronze badges

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

2 Comments

Roman Kolesnikov Over a year ago

1) I want Observables to be called simultaneously, not in order, I want the results to be in order. 2)I want to get the resulted array back, not individual values

martin Over a year ago

@Rem They you need to formulate your question better. You didn't mention anywhere you want to run request in parallel. Btw, have a look at forkJoin operator.

Roman Kolesnikov · Accepted Answer · 2016-11-28 07:24:03Z

0

Thanks to @martin I found this solution:

const myPromise = val => new Promise(resolve => setTimeout(() => resolve(`Promise Resolved: ${val}`), 
                                                          Math.round(Math.random() * 1000 + 1000)))
const queue = Rx.Observable.of([1,2,3,4,5]);
const result = queue
  .mergeMap(q => Rx.Observable.forkJoin(...q.map(myPromise)));
const subscribeTwo = result.subscribe(val => console.log(val));

answered Nov 28, 2016 at 7:24

Roman Kolesnikov

12.2k11 gold badges48 silver badges68 bronze badges

Collectives™ on Stack Overflow

Angular 2 & RxJS: map an array using Rx Observable

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related