Angular/Typescript - get array out of http response with map OR get specific element-CodePudding

Q1: How to get an array of objects from a http response with a map?

Q2: And how to get a specific object from a http response with a map?

The example URL, example data, CurrencyAPIResponse and Currency object are given below.

I tried 2 methods and many other options, but they don't work:

Q1: Get an array of objects from a Map property of 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: Get 1 specific Currency object from a Response with 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)));
}

Using the specified url you get an object containing a map. The data looks like:

{
  "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": { ... }
  }
}

My type and object definition is:

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 this should be a date? 
    "updatedISO": string,
    "updateduk": string
  },
  "disclaimer": string,
  "chartName": string,
  "bpi": Map<string,Currency>
}

CodePudding user response：

It is not Angular HttpClient. It is more Javascript related.

For Q1 you can use multiple choices to convert an Object literal into an Array. If you are interested in processing the values (create an array of values) you can use Object.values(putYourObjectHere). If you are interested in processing the keys (create an array of keys from your original Object) you can use Object.keys(putYourObjectHere) and so on...

For Q2 you can use Array.prototype.find() among other ES5 and ES6 options. To read about find() method

CodePudding user response：

If you want to get what you want by piping your observables you can do something like this:

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

For the one:

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

I would avoid things like this and just make the first http call once, and then use a function to get out the individual currencies with array.find(element => element.code === name).