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

Angular Reactive Forms: Implementing Error Display and Red Border Styling

What specifications need to be set up for server and client configurations when using a MEAN Stack application?

Can the Date class be expanded by overloading the constructor method?

Is there a feature in VS Code that can automatically update import paths for JavaScript and TypeScript files when they are renamed or

Is there a way for me to define the type of a prop based on the type of another prop?

Troubleshooting CORS: Dealing with 'Access-Control-Allow-Origin' issue in Angular when making HTTP calls with Spring Boot. Learn how to handle

Tips on preventing the copying of .txt and .xml files with the fs-extra.copySync function

Webpack and incorporating bespoke scripts

Unit testing in Angular: Using TestBed to mock asynchronous calls from injected services

Unable to retrieve the request body with bodyParser

Display of Navigation Bar in Angular is Not Proper

Exploring Angular's Animation Feature for HTML Element Movement

Identify numbers and words within a sentence and store them in an array

Eliminating empty elements from arrays that are nested inside other arrays

What is the best way to adjust the output size for ngx-webcam?

What steps should I follow to ensure that TypeScript is aware of the specific proptypes I am implementing?

Is ngForIn a valid directive in Angular 4?

How can I display a route from the starting point to the destination with all markers on a Leaflet map, using latitudes and longitudes from an API in Angular

Navigating through JSON data in an Angular application

Strange error message regarding ES6 promises that is difficult to interpret