Add data transformation step after http call in Angular and RxJS

Question

Question: Is the approach below a good way of doing it in Angular with RxJS using observables .pipe .map or.subscribe?

Scenario: After getting the data from a http call, I want to use this data in a seperate (long & heavy) transformation step and then return both - the original data (e.g. for tables) and the transformed data (e.g. for charts).

First I used nested subscriptions and then found this blog post exlaining how to avoid this. I tried to apply it to my scenario but not sure if this is the best way doing it?

// this would be in my service
fetchData(): Observable<any> {
    return this.http.post<any>(this.url, this.body, this.options)
        .pipe(
            switchMap(response => {
                // Received response object
                const dataOrig = response;

                return this.createChartData(response)
                    // Combine the dataOrig object and the resolved dataChart to a single object
                    .pipe(
                        map(dataChart => ({ dataOrig, dataChart }))
                    );
            }));
};

createChartData(data: any) {
    // do some heavy transformation with data here
    let output = ['a', 100, 'b', 50];   // example output
    return from(output);                // not sure if I need an observable here at all
}



////////////////////////////////////////
// this would go later in the component
final = {
    dataOrig: null,
    dataChart: null
};

finalStep() {
    this.fetchData()
        .subscribe(({ dataOrig, chartData }) => {
            // Update the view with the matching information
            this.final.dataOrig = dataOrig;
            this.final.dataChart = chartData;
        });
}

I would suggest , do all the data manupulation at component level . This will also give you the flexibity to keep the actual data returned from the API as remains in unchanged state/ — Shivansh Seth
– Shivansh Seth, Commented Feb 19, 2021 at 5:57
So would you call the data-tranform function from inside the .subscribe to the api call in the component? But would you then not end up with nested .subscribe as the data-transform also should be an observable? — Daniel Oberbillig
– Daniel Oberbillig, Commented Feb 19, 2021 at 8:36

Picci · Accepted Answer · 2021-02-19 08:36:55Z

In general my advice is to put as much logic as possible in the services, including data transformation. The main reason for me is that it makes testing much easier.

In your case it looks like the POST returns some data that you need to transform in your app. Such transformation seems synchronous, i.e. it does not require any call to any external async resource, so I do not see why you should need switchMap. A simple map should do the work.

So, at the end, what I would do is more or less this

fetchData(): Observable<any> {
  return this.http.post<any>(this.url, this.body, this.options)
    .pipe(
       map(response => {
         const transformedData = this.createChartData(response);
         return { response, transformedData }
       })
     )
}

createChartData(data: any) {
    // do some heavy transformation with data here
    // you do not have to return an Observable here
    return resultOfTransformation
}

Collectives™ on Stack Overflow

Add data transformation step after http call in Angular and RxJS

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