[Fixed] What is the proper way to handle concatenation of data returned from multiple http observables in angular2/4 rxjs?

Issue

I have 5 different URLs that each return data in the from of an array of objects. I want to concat these objects into a single array that I store local to my ANgular2 componenent. Right now, I do something like this in my ngOnInit:

this.myHttpService.graburl1data()
    .subscribe(
        response => {
            if(!this.mylist) {
                this.mylist = []
                this.mylist = this.mylist.concat(response);
            } else {
                this.mylist = this.mylist.concat(response);
            }

            this.myHttpService.graburl2data()
                .subscribe(
                    response => {
                        if(!this.mylist) {
                            this.mylist = []
                            this.mylist = this.mylist.concat(response);
                        } else {
                            this.mylist = this.mylist.concat(response);
                        }
                    });
        });

There has to be a better way, please help!

Solution

Suppose you have two requests and each returns an observable that emits an array as a stream value:

const response1 = of([1, 2, 3]);
const response2 = of([4, 5, 6]);

You want to get those values as a stream of values – flattened. You can use a combination of operators to do that:

const merged = merge(response1, response2).mergeMap((a) => {
  return a;
});

merged.subscribe((v) => {
  console.log(v);
});

You will get the following output:

1
2
3
4
5
6

You can read more about the merge operator here.

In your case you will obtains the response observables by calling the http:

const response1 = this.myHttpService.graburl1data(),
const response2 = this.myHttpService.graburl2data()
...

So, the final code is:

import { merge } from 'rxjs/observable/merge';
import 'rxjs/add/operator/mergeMap';

const merged = merge(
  this.myHttpService.graburl1data(),
  this.myHttpService.graburl2data()
).mergeMap((a) => {
  return a;
});

merged.subscribe((v) => {
  console.log(v);
});