angular 6,how to merge responses from a api into a single array

Question

here i got two Json responses ie., books and authors.i want those two responses in a single array

this.http.getbooks().subscribe(
    data=>{
    this.getbooksinfo=data;
    }
)
this.http.getauthors().subscribe(
    data=>{
    this.authors=data;
    }

)

getauthors,getbooks info are two methods that gets info from restapi using http get method..how to store this.author and this.booksinfo in single array?

Let newData = this.getbooksinfo.concat(this.authors). – Joseph Jun 06 '18 at 14:22 — Joseph, Jun 06 '18 at 14:22
thats not working,i already tried it :(, – sai phanindra Jun 06 '18 at 16:09 — sai phanindra, Jun 06 '18 at 16:09

wper · Accepted Answer · 2018-06-06T14:41:23.430

2

You can optionally use forkJoin:

const books = this.http.getbooks();
const authors = this.http.getauthors();

forkJoin([books, authors]).subscribe(response => {
 // response[0] will be req1 response
 // response[1] will be req2 response
})

The other option as mentioned in the comments is using combineLatest:

combineLatest(books, authors).subscribe(response => {
 ...
})

edited Jun 06 '18 at 14:41

answered Jun 06 '18 at 14:24

wper

352
2
13

He can use combineLatest, too. There is this thread: https://stackoverflow.com/questions/41797439/rxjs-observable-combinelatest-vs-observable-forkjoin – Christian Benseler Jun 06 '18 at 14:26
1

@ChristianBenseler, nice one. Thanks for that! – wper Jun 06 '18 at 14:27
you could update your answer with the combineLatest so it will have more information for the OP. – Christian Benseler Jun 06 '18 at 14:28
@ChristianBenseler not 100% sure on the syntax since I have never personally used `combineLatest` but feel free to edit and add it if you would like. – wper Jun 06 '18 at 14:33
1

The usage is similar to forkJoin: you pass an array of observables and subscribe to it. Example here: https://github.com/btroncone/learn-rxjs/blob/master/operators/combination/combinelatest.md note that there is also a combineAll operator. – Christian Benseler Jun 06 '18 at 14:37

Otavio Alenski · Answer 2 · 2018-06-06T14:48:03.243

I don't know if my answer will suit you but, you can create an empty array object in your component and when you do the RESTAPI call you just do a push on the object.

Something like:

private arrayObject: any = [];

this.http.getbooks().subscribe(
    data=>{
    this.getbooksinfo=data;
    this.arrayObject.push(this.getbooksinfo);
    }
)
this.http.getauthors().subscribe(
    data=>{
    this.authors=data;
    this.arrayObject.push(this.authors);
    }

)

EDITED ---

Following edkeveked comment, you can user forkJoin, but need to change a little bit your code.

import { forkJoin } from "rxjs/observable/forkJoin";
    let apibooks = this.httpClient.get('YOU_API_URL');
    let apiauthors = this.httpClient.get('YOU_API_URL');

    forkJoin([apibooks, apiauthors]).subscribe(results => { console.log(results); // will print array of results;
console.log(results[0]); // will print apibooks results;
console.log(results[1]); // will print apiauthors results;
});

Print to console log so you can understand whats happening.

But using this approach, he won't be able to "observe" when both values are emitted. The best way, using rxjs (and following the angular approach) is to use rxjs' operators, such as combineLatest or forkJoin. — Christian Benseler, Jun 06 '18 at 14:27

angular 6,how to merge responses from a api into a single array

2 Answers2