using RxJs forkJoin to merge multiple api calls into single output array

Question

Let's say I have 4 API calls. In this case, each of the 4 calls return the same data structure so I don't need to manipulate the return types. They each return an array of objects. I'd like to call them all, but combine them into on output array. I tried combining forkJoin with .concat() but that didn't do what I expected (it put them inside of smaller arrays).

forkJoin([
  this.service.getData('something', 'somethingelse'),
  this.service.getData('something1', 'somethingelse2')
].concat()).subscribe(data => console.log(data))

Let me check if I understand... each call gives you something like [{a:1 b:1}, {a:2,b:2}] and [{a:3 b:3}, {a:4,b:4}]... and you want [{a:1 b:1}, {a:2,b:2}, {a:3 b:3}, {a:4,b:4}] as the final output? — Takatalvi
– Takatalvi, Commented Dec 17, 2020 at 23:17
yes. One array that takes all the objects of every inner array and puts them into a singular array output. I can use forkJoin with the dictionary syntax and convert each return Object to an array, but that seems unnecessary given all RxJs can do. I just don't know which operator to use in which succession. — J.G.Sable
– J.G.Sable, Commented Dec 17, 2020 at 23:25
Well.. what if you just do this: forkJoin([ this.service.getData('something', 'somethingelse'), this.service.getData('something1', 'somethingelse2') ]).subscribe(data => console.log(data[0].concat(data[1]))) — Takatalvi
– Takatalvi, Commented Dec 17, 2020 at 23:29

Rafi Henig · Accepted Answer · 2020-12-17 23:37:47Z

3

Consider the following implementation: (concating the arrays is performed once data has been returned)

forkJoin([
  this.service.getData('something', 'somethingelse'),
  this.service.getData('something1', 'somethingelse2')
])
.pipe(
  map(x => x.reduce((arr, curr) => [...arr,...curr]))
)
.subscribe(data => console.log(data))

Or using ES2019 flat

forkJoin([
  this.service.getData('something', 'somethingelse'),
  this.service.getData('something1', 'somethingelse2')
])
.pipe(
  map(x => x.flat())
)
.subscribe(data => console.log(data))

edited Dec 17, 2020 at 23:37

answered Dec 17, 2020 at 23:30

Rafi Henig

6,4502 gold badges22 silver badges41 bronze badges

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

Collectives™ on Stack Overflow

using RxJs forkJoin to merge multiple api calls into single output array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related