How to access properties from a Javascript object?

Question

I have an api call that produces the follow results in the console (after pairing it down using map() ).

{…}

CHANGE24HOUR: "$ 11.16"

CHANGEDAY: "$ 3.31"

CHANGEPCT24HOUR: "6.73"

CHANGEPCTDAY: "1.90"

FROMSYMBOL: "Ξ"

HIGH24HOUR: "$ 183.38"

HIGHDAY: "$ 183.38"

However, no matter what I try I can't get at it's properties. The object is called 'coinStats'.

I have tried the following:

coinStats.HIGHDAY = undefined
coinStats['HIGHDAY'] = undefined
coinStats["HIGHDAY"] = undefined

Tried to convert it to an array to see if that would help using

Object.values(coinStats)  // Would not work

I am sure the answer is so simplistic. But I am just not sure what it is?

The original raw api results are in the following shape:

(1) […]

0: Object { CoinInfo: {…}, RAW: {…}, DISPLAY: {…} }

length: 1

<prototype>: [

The info I am looking for is in DISPLAY -> USD. I used a map() function to return that sub-object.

The code I am using to fetch the data is essentially the following:

const API = 'https://min-api.cryptocompare.com/data/top/mktcapfull?tsym=USD&page=1';

fetch(API)
  .then(results => results.json())
  .then(coinData => {

    const view = coinData.Data.filter(obj => { return obj.CoinInfo.Name === TRX});

  })

const coinFeedAbridged = view.map(item => item.DISPLAY.USD);

const coinStats = coinFeedAbridged[0];

console.dir(coinStats);

I can't access coinStats.HIGHDAY for example... I get 'undefined'.

How does your "api call" work? What do you do to retrieve it and what is the shape of the object? — Aron
– Aron, Commented May 7, 2019 at 11:58
That's exactly what I have above. Well... that is from console.dir(coinFeed). — phoenixson
– phoenixson, Commented May 7, 2019 at 12:07
It could be that they are non enumerable, non-writable properties. Check what the output is of Object.getOwnPropertyDescriptor(coinFeed, 'HIGHDAY'). It could also be that the object is frozen: check Object.isFrozen(coinFeed) — trincot
– trincot, Commented May 7, 2019 at 12:10
It is hard guessing if we don't have code with which to reproduce the problem. One other thing is that the console also shows inherited properties, which could lead to an explanation. But there can be so many things going on... We need a mvce — trincot
– trincot, Commented May 7, 2019 at 12:27

aleberguer · Accepted Answer · 2019-05-07 13:37:18Z

1

The fetch call is async, so you can't access the view variable until the call is finished. The code calls the async function and runs the next line, so view variable will be undefined. You have to handle the data inside the fetch callback function, where the data is known.

const API = 'https://min-api.cryptocompare.com/data/top/mktcapfull?tsym=USD&page=1';

  fetch(API)
    .then(results => results.json())
    .then(coinData => {

      const view = coinData.Data.filter(obj => { 
        return obj.CoinInfo.Name === 'TRX'
       });

      const coinFeedAbridged = view.map(item => item.DISPLAY.USD);

      const coinStats = coinFeedAbridged[0];
      console.log(coinStats);

    })
  }

You can test it out in this fiddle. https://jsfiddle.net/gran7ptk/1/

answered May 7, 2019 at 13:37

aleberguer

3706 silver badges15 bronze badges

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

6 Comments

phoenixson Over a year ago

I am already able to view the whole object. I just am not able it access it's properties. Although in your Fiddle you used JSON.stringify() and is something I will look into it.

aleberguer Over a year ago

I'm using JSON.stringify() to show it on the screen, you can change it to console.log and you will see the object in the console.

aleberguer Over a year ago

check this out jsfiddle.net/gran7ptk/2, I'm accessing coinStats.HIGHDAY there

phoenixson Over a year ago

That's great but I would like to extract the separate properties within the render() function rather that using setState() to pass one property. What would that code look like?

aleberguer Over a year ago

You can store the whole object in the state and access its properties in the render method. jsfiddle.net/gran7ptk/3

|

preeti jain · Accepted Answer · 2019-05-07 13:26:59Z

0

Change line - Add inverted commas to Text "TRX".

 const view = coinData.Data.filter(obj => { return obj.CoinInfo.Name
 === TRX});

to const view = coinData.Data.filter(obj => { return obj.CoinInfo.Name === "TRX"});

answered May 7, 2019 at 13:26

preeti jain

1291 gold badge2 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to access properties from a Javascript object?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related