RXJS Using ForkJoin with objects

Question

I am trying to use forkJoin to run an array of objects with a key and a value which is the observable. I need to make it to where the array of objects will result in the key being the same and the value being the result of the observable api call. This object can have any number of key value pairs. And I need to wait till they are all done before I can continue.

If I have:

{
  headerLogo: this.http.post(url, image),
  loginBackground: this.http.post(url2, image)
}

I need it to result in:

{
  headerLogo: resultOfApiCall
  loginBackgroud: resultOfApiCall2
}

I have tried using ForkJoin but it seems to only take an array of just the observables and no keys. They keys are important so that I know what URL goes with what key so I can save them in the correct spot. The original fork join will return an array of objects which represent the result of the api calls but I have no idea which one belongs to which key.

Any thoughts on this?

Answer 1

From RxJS v6.5+, you could use a dictionary (key value pairs) as sources.

Example and Stackblitz sourced from Learn RxJS:

const { forkJoin } = rxjs;
const { ajax } = rxjs.ajax;

const jsonEditor = document.getElementById('json-editor');
const textContainer = document.getElementById('text-container');

const options = {};
const editor = new JSONEditor(jsonEditor, options);

/*
  when all observables complete, provide the last
  emitted value from each as dictionary
*/
forkJoin(
  // as of RxJS 6.5+ we can use a dictionary of sources
  {
    google: ajax.getJSON('https://api.github.com/users/google'),
    microsoft: ajax.getJSON('https://api.github.com/users/microsoft'),
    users: ajax.getJSON('https://api.github.com/users')
  }
)
.subscribe({
  next: (response) => editor.set(response),
  error: (error) => textContainer.innerHTML = error
});

<link href="https://unpkg.com/jsoneditor@9.4.1/dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/rxjs@6.5.0/bundles/rxjs.umd.min.js"></script>
<script src="https://unpkg.com/jsoneditor@9.4.1/dist/jsoneditor-minimalist.min.js"></script>

<div id="json-editor" style="width: 600px; height: 400px;"></div>
<span id="text-container"></span>

Answer 2

forkJoin will return results in the same order. It means:

forkJoin([
  this.http.post(url, image),
  this.http.post(url2, image),
]).subscribe(([resultOfApiCall, resultOfApiCall2]) => {
  // save result of API1 with resultOfApiCall
  // save result of API2 with resultOfApiCall2
})

Answer 3

Javascript Objects are not ordered so if you get just an array of observables back, you can't be sure that it belongs to one particular key.

Lets try this way, get key, value pairs first, as an Array. We will use the keys even as Observables and apply forkJoin over both keys and actual requests so that, when they come, they come together. Finally, We can apply a forkJoin over all the forkJoins and convert the results back to an Object using a map.

    const myObject = {
        headerLogo: this.http.post(url, image),
        loginBackground: this.http.post(url2, image)
    }

    const keyValuesAsObservables = Object.entries(myObject).map(([k, v]) => {
        return forkJoin(of(k), v);
    });

    forkJoin(...keyValuesAsObservables).pipe(map(res) => {
        return Object.fromEntries(res);
    });

Answer 4

Since your example doesn't show an array of objects, but just an object I assume that is what you are using. You can access the properties of the resulting object ( note that I am using object destructoring in the subscribe, because it looks nice and clean ):

forkJoin({
  headerLogo: this.http.post(url, image),
  loginBackground: this.http.post(url2, image)
})
.subscribe( ({headerLogo, loginBackground}) => {
  // .....
})