Converting Angular HTTP Response from Object of Objects to Array with Interface Typing

Question

Converting Angular HTTP Response from Object of Objects to Array with Interface Typing

After receiving a response, the data is structured as follows:

{
    "0": {
        "name": "Novartis AG",
        "symbol": "NVS",
        "has_intraday": false,
        "has_eod": true,
        "country": null,
        "stock_exchange": {
            "name": "New York Stock Exchange",
            "acronym": "NYSE",
            "mic": "XNYS",
            "country": "USA",
            "country_code": "US",
            "city": "New York",
            "website": "www.nyse.com"
        },
        "stock": {
            "open": 84.845,
            "high": 85.39,
            "low": 84.845,
            "last": 85.33,
            "close": 84.24,
            "volume": 3700,
            "date": "2022-01-27T14:40:00+0000",
            "symbol": "NVS",
            "exchange": "IEXG"
        }
    },

This response consists of multiple nested objects. I have created an interface that defines the structure, like this:

export interface Stock {
  ticker: string;
  name?: string;
  open?: number;
  high?: number;
  low?: number;
  last?: number;
  close?: number;
}

Now, my goal is to transform the singular object observable into an array of Stock type observable in the service call:

getStocks(): Observable<Array<Stock>> {
...
}

I am currently facing challenges in achieving this transformation and would greatly appreciate any assistance!

angular typescript http rxjs observable

Answer 1

Answer №1

Utilize the "map" operator in rxjs and the "map" method of an array for your function.

Your function could look something like this:

getStocks(){
   this.httpClient.get("....").pipe(
     map((res:any)=>{
        //res is your object
        
        //iterate over Object.keys(res)
        //will be "0", "1", "2"...

        //for example, res[x] is
        const result=Object.keys(res).map(x=>({
              ticker:res[x].acronym,
              name:res[x].stock_exchange.name,
              open:res[x].stock.open,
              high:res[x].stock.high
              ...other properties...
         }));
        return result;
     })
   )
}

Note that the first map inside the pipe(map(...)) transforms your object into another object - remember to always include a return statement when using map=>{...}.

Answer 2

Utilize the "map" operator in rxjs and the "map" method of an array for your function.

Your function could look something like this:

getStocks(){
   this.httpClient.get("....").pipe(
     map((res:any)=>{
        //res is your object
        
        //iterate over Object.keys(res)
        //will be "0", "1", "2"...

        //for example, res[x] is
        const result=Object.keys(res).map(x=>({
              ticker:res[x].acronym,
              name:res[x].stock_exchange.name,
              open:res[x].stock.open,
              high:res[x].stock.high
              ...other properties...
         }));
        return result;
     })
   )
}

Note that the first map inside the pipe(map(...)) transforms your object into another object - remember to always include a return statement when using map=>{...}.

Converting Angular HTTP Response from Object of Objects to Array with Interface Typing

Answer №1

Similar questions

Cross-origin resource sharing (CORS) is preventing access because the origin and allowed origin match

`Mapping child routes in Angular using basic components`

Unknown type encountered when using v-for with Vue3 item

Exploring the weather API integration with Angular 4

The PKIJS digital signature does not align with the verification process

Leverage the power of Angular CLI within your current project

Safari browser failing to render Angular2 ngFor content

I am facing difficulty transitioning from iframe to the Angular App

Steps to access information from Firebase database by providing the currentUserID:

You cannot use Angular 5 to send a post request with a token that has been retrieved

What is the best way to manage the 'content' attribute in TSX?

Setting an Observable reference to null within a map operator does not have any impact

Can you explain the meaning of `(error: T) => void` in error?

Verify whether any errors occurred in any controls within the specified form group

Snapshots testing app Expo TypeScript Tabs App.tsx

Using a BehaviorSubject in conjunction with ngIf can rearrange the placement of elements

Is there a way to transfer data from a custom hook to a component seamlessly?

What is the most effective way to handle DOM events in Angular 8?

Retrieving information from an http request within a for loop in an Angular 2+ application

How can I modify the appearance of folders in FileSystemProvider?