How to call the API in sequential order in Angular9 with rxjs?

mkHun

I am trying to call the API in sequential order and I will use the previous response for the next API call. And I will be having the N number of API calls, Lets consider below is my sample array I have,

data = [
    {
        api: '/api/allGeneTables/',
    },
    {
        api: '/api/tables/',
        fieldName: 'profiles', // I am using this for building api
        concatWithPrevField: true,
        prevField: 'positions' // I am using this for building api
    },
    {
        api: '/api/tables/superpositions',
        fieldName: 'identical', // I am using this for building api
        concatWithPrevField: true,
        prevField: 'length' // I am using this for building api
    }
]

First API will produce the data like this

https://myurl/api/allGeneTables/
API Response:
{
    'positions': 10,
    'index': 12,
    'name': 'triosephaspate'
}

I need to create the next api with the previous value (positions) along with given fieldName (profiles), so the the second api would be

https://myurl/api/tables/10/profiles
// 10 came from the previous response value (positions)
// profiles is one of field's value of the current array

API Response: 
{
    'lipidprofile': 15,
    'maxvalue': 12,
    'name': 'triosephaspate',
    'length':232
}

similar way I need to create the next API.

https://myurl/api/tables/superpositions/232/identical
// 232 came from the previous response value (length)
// identical is one of field's value of the current array

I have tried with the map operator and following is my code

from(data).pipe(map(res => {
  const eachObj: any = res;
  let urlConcat = '';
  console.log(res);
  if (eachObj.concatWithPrevField) {
    // urlConcat = eachObj.api + ;
  } else {
    urlConcat = eachObj.api;
  }
  return this.dhs.getGeneData(urlConcat).subscribe();
})).subscribe();

I stuck at, how to join the previous API response value with the current data to make the API URL so I can call the next API. I am trying this with the RXJS methods.

Rob Monhemius
  • Store the result from an API-call in a function scoped variable (last_result).
  • Use concatMap to wait for the API calls being completed before the next one is initiated and use the new value in last_result.
  • Use reduce to complete the observable stream and emit the latest API-response (last_result).

Stackblitz: https://stackblitz.com/edit/rxjs-v5pg4n?file=index.ts

import { from, interval } from "rxjs";
import { concatMap, map, reduce, take } from "rxjs/operators";

const data_source = [
  {
    api: "/api/allGeneTables/"
  },
  {
    api: "/api/tables/",
    fieldName: "profiles", // I am using this for building api
    concatWithPrevField: true,
    prevField: "positions" // I am using this for building api
  },
  {
    api: "/api/tables/superpositions/",
    fieldName: "identical", // I am using this for building api
    concatWithPrevField: true,
    prevField: "length" // I am using this for building api
  }
];

call_sequence(data_source).subscribe(console.log);

function call_sequence(data) {
  let last_result = null;
  return from(data).pipe(
    // concatmap awaits finishing of request ( last_result is being set and emits the API response)
    concatMap(fake_fetch),
    // reduce only emit last result from the stream
    reduce(() => last_result)
  );

  function fake_fetch(data) {
    let endpoint = data.api;
    if (data.concatWithPrevField) {
      endpoint = endpoint.concat(`${last_result[data.prevField]}`);
      endpoint = endpoint.concat(`/${data.fieldName}`);
    }
    return fake_API_call(endpoint).pipe(
      map(data => {
        last_result = data;
        return data;
      })
    );
  }
}

function fake_API_call(endpoint) {
  console.log(`making API call to ${endpoint}`);
  return interval(1000).pipe(
    take(1),
    map(data => {
      switch (endpoint) {
        case "/api/allGeneTables/":
          return {
            positions: 10,
            index: 12,
            name: "triosephaspate"
          };
        case "/api/tables/10/profiles":
          return {
            lipidprofile: 15,
            maxvalue: 12,
            name: "triosephaspate",
            length: 232
          };
        case "/api/tables/superpositions/232/identical":
          return "Hurray, I am the final result";
        default:
          console.error("This endpoint doesn't exist");
      }
    })
  );
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Sequential API call using Rxjs in Angular with null return

How to use RxJS observables in sequential order?

How to convert a Subsink api call to Promise.all within Angular9?

How to guarantee sequential order with angular http rest api in for loop?

How to make multiple API calls in sequential order

Multiple sequential API calls using RXJS in Angular 12 app

How to manage multiple sequential subscribe methods in Angular and RxJs?

Angular9/rxjs6.5: How to Transform an Array of Observable Object Array to an Observable Object Property Array?

colors in sequential order in angular

Angular RxJS sequential requests issue

call multiple async functions in sequential order

How can I call a REST API early and often using RxJS and Angular 8?

Angular : how to call finally() with RXJS 6

How to access data in an array in order to call an API?

Angular rxjs sets of sequential http calls

How to return object from API call using RxJS, Axios and TypeScript?

How to Skip the API call using RxJS skip operator?

How to call multiple dependent api calls with time intervals using RxJS

How to call setTimeout in a for loop in order to make an api call

The API call with RXJS is not working properly

How to reorder an API call to a custom order by API ID?

How to reassign variable in angular9?

XSLT:How to Maintain Sequential Order of tag in XML

How to execute Vertx Future in sequential order

How to rename dictionary keys to follow sequential order?

How do I read images in their sequential order?

How to run test in sequential order in loadimpact?

How to change files in the sequential order of the loop

How to reshape a dataset in order to make it sequential?