Extracting an array from an HTTP response in Angular/Typescript using the map operator or retrieving a specific element

Question

Extracting an array from an HTTP response in Angular/Typescript using the map operator or retrieving a specific element

Q1: How can I extract an array of objects from a http response using map in Angular?

Q2: Is there a way to retrieve a specific object from a http response by utilizing map in Angular?

Below are the example URL, sample data, CurrencyAPIResponse, and Currency object for reference.

I have experimented with 2 methods and various alternatives, but none seem to be effective:

Q1: Extract an array of objects from a Map property within the Response object:

get(): Observable<Currency[]> {
    return this.httpClient.get<CurrencyAPIResponse>('https://api.coindesk.com/v1/bpi/currentprice.json')
      .pipe( map( response => Array.from( response.bpi.values())));
}

Q2: Retrieve a specific Currency object from a Response containing a Map property:

getOne(name: string): Observable<Currency> {
    // @ts-ignore
    return this.httpClient.get<CurrencyAPIResponse>('https://api.coindesk.com/v1/bpi/currentprice.json')
      .pipe( map( response => response.bpi.get( name)));
}

Upon accessing the specified url, you will obtain an object with a map structure. The data is as follows:

{
  "time": {
    "updated": "Jun 5, 2022 12:04:00 UTC",
    "updatedISO": "2022-06-05T12:04:00+00:00",
    "updateduk": "Jun 5, 2022 at 13:04 BST"
  },
  "disclaimer": "Some text",
  "chartName": "Bitcoin\"",
  "bpi": {
    "USD": {
      "code": "USD",
      "symbol": "&#36;",
      "rate": "29,698.5140",
      "description": "United States Dollar",
      "rate_float": 29698.514
    },
    "GBP": { ... }, 
    "EUR": { ... }
  }
}

The definition of my type and object is as follows:

Currency:

export class Currency {
  code: string = '';
  symbol: string = '';
  rate: number = 0;
  description: string = '';
  rate_float: number = 0;
}

The CurrencyAPIResponse:

interface CurrencyAPIResponse {
  "time": {
  	"updated": string, // or should this be a date?
    "updatedISO": string,
    "updateduk": string
  },
  "disclaimer": string,
  "chartName": string,
  "bpi": Map<string,Currency>
}

angular typescript

Answer 1

Answer №1

Not specifically using the Angular HttpClient, but rather more focused on Javascript.

In response to Question 1, there are various methods you can employ to convert an Object literal into an Array. For instance, if you wish to extract values and create an array from them, you can utilize Object.values(putYourObjectHere). Alternatively, if you want to extract keys and create an array of them from your original object, you can use Object.keys(putYourObjectHere) and so forth.

Regarding Question 2, you have the option of utilizing Array.prototype.find() as well as other options available in both ES5 and ES6. To learn more about the find() method

Answer 2

Not specifically using the Angular HttpClient, but rather more focused on Javascript.

In response to Question 1, there are various methods you can employ to convert an Object literal into an Array. For instance, if you wish to extract values and create an array from them, you can utilize Object.values(putYourObjectHere). Alternatively, if you want to extract keys and create an array of them from your original object, you can use Object.keys(putYourObjectHere) and so forth.

Regarding Question 2, you have the option of utilizing Array.prototype.find() as well as other options available in both ES5 and ES6. To learn more about the find() method

Answer 3

Answer №2

To achieve your desired outcome through piping observables, you can follow this approach:

fetchData(): Observable<Currency[]> {
    return this.http.get<CurrencyAPIResponse>('https://api.coindesk.com/v1/bpi/currentprice.json')
  .pipe( 
      pluck('bpi'),
      map(obj => [...Object.values(obj)])
  );
}

If you need only one currency:

fetchOne(name: string): Observable<Currency> {
    return this.fetchData()
  .pipe( 
      map(array => array.find(element => element.code === name))
  );
}

A more efficient approach would be to make the initial HTTP call just once, and then utilize a function to extract individual currencies using

array.find(element => element.code === name)

.

Answer 4

To achieve your desired outcome through piping observables, you can follow this approach:

fetchData(): Observable<Currency[]> {
    return this.http.get<CurrencyAPIResponse>('https://api.coindesk.com/v1/bpi/currentprice.json')
  .pipe( 
      pluck('bpi'),
      map(obj => [...Object.values(obj)])
  );
}

If you need only one currency:

fetchOne(name: string): Observable<Currency> {
    return this.fetchData()
  .pipe( 
      map(array => array.find(element => element.code === name))
  );
}

A more efficient approach would be to make the initial HTTP call just once, and then utilize a function to extract individual currencies using

array.find(element => element.code === name)

.

Extracting an array from an HTTP response in Angular/Typescript using the map operator or retrieving a specific element

Answer №1

Answer №2

Similar questions

In Angular 4, there are two routes that result in the same endpoint but direct to separate modules

Having difficulty updating the value of a FieldArray with setFieldValue in Formik

Eliminate the AM and PM options from the input time selection dropdown menu in HTML

Utilizing Components for Efficient Development in Angular

Sending binary information from a .net core web api to a typescript application

It appears that protractor-flake is programmed to re-run all tests instead of just the ones that have failed

Tips for sorting/merging/consolidating data in Angular

Is there a way to ensure that the onChange event of ionic-selectable is triggered twice?

Angular is throwing an error due to an unexpected token when running on an IIS server within a subfolder

Why does my useEffect consistently execute after the initial rendering, despite having specified dependencies?

"Issue with default select value in Angular using ngModel - one select element not setting default value, while another works fine

Android encountered an unknown error while trying to access the URL, resulting in an HTTP failure response with a status

Is it possible to confirm that a value is a valid key without prior knowledge of the object's keys during compile-time?

Function in Typescript that accepts an array or a single instance of a constructor and then returns a list

Preventing specific directories from being imported in a Typescript project

Storing multiple items in an array using LocalForage

Managing onChange in a ReactJs project

What is the correct way to wrap an http.get in TypeScript?

Node.js is raising an error because it cannot locate the specified module, even though the path

Implementing Injector Class instead of ReflectiveInjector class is a great way to improve performance