Exploring the wonders of HTTP requests through pure pipes in Angular 5

Question

Exploring the wonders of HTTP requests through pure pipes in Angular 5

I've been working on a pipe that converts currency values from one to another by making an HTTP call. The idea is to pass in the source and destination currencies as parameters.

@Pipe({
    name: "currencyConverter"
})
export class CurrencyConverterPipe implements PipeTransform {

    transform(value: number, currencyPair: string): number {
        let sourceCurrency = currencyPair.split(":")[0];
        let destinationCurrency = currencyPair.split(":")[1];
        this.currencyConverterService.convert(sourceCurrency, destinationCurrency).subscribe(successData => {
            return successData['fiatValue'] * value;
        }, errorData => {
            console.error(errorData);
        })
    }
}

When using it in HTML:

<p> {{ value | currencyConverter:'BTC:USD'}}</p>

However, I'm facing a problem where no value is being displayed on the UI. If I set my pipe to impure, it starts working but results in multiple HTTP calls to the server. Is there a way to make the HTTP call without having to use pure: false in the pipe?

javascript angular typescript

Answer 1

Answer №1

This pipe is not inherently pure.

To prevent multiple requests, it should return the same observable without making additional requests until the input changes. Here's an example:

@Pipe({
  name: "currencyConverter",
  pure: false
})
export class CurrencyConverterPipe {
  private sourceCurrency;
  private destinationCurrency;
  private valueSubject = new Subject();
  private value$ = this.valueSubject.asObservable().distinctUntilChanged()
    .switchMap(value => {
      return this.currencyConverter
        .convert(sourceCurrency, destinationCurrency))
        .map((data) => data * value);
    });

  constructor(private currencyConverter: ...) {}

  transform(value: number, currencyPair: string): number {
    this.sourceCurrency = currencyPair.split(":")[0];
    this.destinationCurrency = currencyPair.split(":")[1];
    this.valueSubject.next(value);
    return this.value$;
  }
}

Since it is meant to be used in conjunction with the async pipe, it would make sense to combine them and extend the functionality of AsyncPipe:

@Pipe({
  name: "currencyConverterAsync",
  pure: false
})
export class CurrencyConverterPipe extends AsyncPipe {
  private sourceCurrency;
  private destinationCurrency;
  private valueSubject = new Subject();
  private value$ = this.valueSubject.asObservable().distinctUntilChanged()
    .switchMap(value => {
      return this.currencyConverter
        .convert(sourceCurrency, destinationCurrency))
        .map((data) => data * value);
    });

  constructor(cdRef: ChangeDetectorRef, private currencyConverter: ...) {
    super(cdRef);
  }

  transform(value: number, currencyPair: string): number {
    this.sourceCurrency = currencyPair.split(":")[0];
    this.destinationCurrency = currencyPair.split(":")[1];
    this.valueSubject.next(value);

    return super.transform(this.value$);
  }
}

Answer 2

This pipe is not inherently pure.

To prevent multiple requests, it should return the same observable without making additional requests until the input changes. Here's an example:

@Pipe({
  name: "currencyConverter",
  pure: false
})
export class CurrencyConverterPipe {
  private sourceCurrency;
  private destinationCurrency;
  private valueSubject = new Subject();
  private value$ = this.valueSubject.asObservable().distinctUntilChanged()
    .switchMap(value => {
      return this.currencyConverter
        .convert(sourceCurrency, destinationCurrency))
        .map((data) => data * value);
    });

  constructor(private currencyConverter: ...) {}

  transform(value: number, currencyPair: string): number {
    this.sourceCurrency = currencyPair.split(":")[0];
    this.destinationCurrency = currencyPair.split(":")[1];
    this.valueSubject.next(value);
    return this.value$;
  }
}

Since it is meant to be used in conjunction with the async pipe, it would make sense to combine them and extend the functionality of AsyncPipe:

@Pipe({
  name: "currencyConverterAsync",
  pure: false
})
export class CurrencyConverterPipe extends AsyncPipe {
  private sourceCurrency;
  private destinationCurrency;
  private valueSubject = new Subject();
  private value$ = this.valueSubject.asObservable().distinctUntilChanged()
    .switchMap(value => {
      return this.currencyConverter
        .convert(sourceCurrency, destinationCurrency))
        .map((data) => data * value);
    });

  constructor(cdRef: ChangeDetectorRef, private currencyConverter: ...) {
    super(cdRef);
  }

  transform(value: number, currencyPair: string): number {
    this.sourceCurrency = currencyPair.split(":")[0];
    this.destinationCurrency = currencyPair.split(":")[1];
    this.valueSubject.next(value);

    return super.transform(this.value$);
  }
}

Exploring the wonders of HTTP requests through pure pipes in Angular 5

Answer №1

Similar questions

Choosing the selected option in AngularJS

Resize the textarea to fit a maximum of five lines, and display a scrollbar if necessary

Guidelines on Transferring Variables to a JavascriptExecutor Script

How can I iterate through multiple rows in JavaScript?

AngularJS: default option not being selected in dropdown menus

What is the best method to organize HTML tables in Knockout by utilizing a Breeze navigation property?

Leverage the power of the MEAN stack with Angular 2 to seamlessly retrieve data from multiple APIs

Is there a way to turn off eslint's no-promise-executor-return rule?

Bootstrap 4 or ngBootstrap: A Comparison

utilize Java version specifically designed for integrating with Angular framework and SOAP web services

Tips for dividing by a large number

Receiving data through multiple ajax calls nested within another ajax call

In ReactJs, what is the best way to load a new component when a button is clicked?

The only information returned from calling mongoose's Model.save() method are the fields { _id, __

How can we exclude fields from JSON.stringify in type-graphql entities?

"Utilize PHP to access an object's properties in a manner similar to an array

Ways to conceal the scroll bar upon the initial loading of a webpage

Error: Unable to locate namespace 'google' in TypeScript

Updating or deleting query strings using JavaScript

retrieving the parent of the a tag from a jquery form