Transform Angular Http Response from Object of Objects to Interface typed Array

Question

So I have a response that returns data that looks like this:

{
    "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"
        }
    },

It is an object containing more objects, obviously. I have an interface that looks like this:

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

What I am trying to do is get the response in my service call to be an array of Stock so:

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

I am having trouble coming up with a way to transform this singular object observable into an array of my Stock type observable. I really appreciate any help!

I don't fully understand the question. Would you like to know how to convert your object of objects into an array of objects? — MikeOne
– MikeOne, Commented Jan 27, 2022 at 19:32
@MikeOne no not really, I can do that, I'm more looking at what to do in the service method to convert the data to my specific type before calling subscribe in my actual component. Currently I have it working where I just take in the object of objects in the subscribe call on the component and then in the next method I do that conversion, but I wanted to see if there was a cleaner way of doing that in the service first. — Hayden Farnsworth
– Hayden Farnsworth, Commented Jan 27, 2022 at 19:43
Ah sure - you can pipe / map your service and do the conversion there so inside your eventual subscribe, you'lll get the data as you want it. Is that what you mean? — MikeOne
– MikeOne, Commented Jan 27, 2022 at 19:53

Eliseo · Accepted Answer · 2022-01-27 19:53:49Z

2

You can use the "map" rxjs/operator and the "map" method of an array.

so you function can be like

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

        //so, e.g. 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
              ...others properties...
         }))
        return result;
     }
   ))
}

See that the first map, the pipe(map(...)) transform your object in another object -remember that when you use map=>{...} inside always need a return,

answered Jan 27, 2022 at 19:53

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Transform Angular Http Response from Object of Objects to Interface typed Array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related