Unable to access element from array of JSON objects

Question

I am trying to access the specific elements of an array of JSON objects. To test I simply have:

{console.log(this.state.stockCharts)}

This returns (in browser):

This is great, but now I want to access a specific element. Say the first element. I type:

{console.log(this.state.stockCharts[0])}

And the browser is like: nah mate

undefined

It's probably something really simple, but I have been banging my head against my keyboard for the past 45 minutes and nothing has worked. Thanks guys!

Edit 1 (For Akrion)

The query that I am using to access the API is:

https://www.alphavantage.co/query?function=TIME_SERIES_WEEKLY&symbol=MSFT&apikey=demo

This is what I get back from the call:

I call this API twice, and after I get a response back I push it to my stockCharts array:

this.state.stockCharts.push(result)

Edit 2 (For Beginner)

I initialize the state how you would normally do it:

this.state = {
        stockCharts: []
}

Can you JSON.stringify(this.state.stockCharts) and post also the input? — Akrion
– Akrion, Commented Aug 17, 2018 at 3:19
Is that JSON? Like this.state.stockCharts[0]["Weekly Time Series"]? Never seen gaps like that in keys. — Kilmazing
– Kilmazing, Commented Aug 17, 2018 at 3:21
could you please both in the same time {console.log(this.state.stockCharts,this.state.stockCharts[0])} for just testing purpose — Janaka Dissanayake
– Janaka Dissanayake, Commented Aug 17, 2018 at 3:24
@HemadriDasari I am calling an api twice, each time getting a JSON object and adding that object to an array of JSON objects (stockCharts). I want to have all of them in one object and handy, thus pushing to state stockCharts — bflynnigan
– bflynnigan, Commented Aug 17, 2018 at 4:16
@Jacob Seems weird that they would deprecate componentWillMount(), as IMO that is the most useful life cycle hook. For instance that is where I do all of my client side authentication and authorization, to make sure that the user must be allowed to access this page before it even renders. Can you elaborate more on why it is being deprecated? — bflynnigan
– bflynnigan, Commented Aug 19, 2018 at 20:37

Hemadri Dasari · Accepted Answer · 2018-08-17 04:21:40Z

3

I verified with the api given in my local and I am able to get the data.

First thing the way you push api response to stockCharts is not recommended. Which means direct mutation of the state is not recommended.

You can push api response in the following way

this.setState(prevState => ({
   stockCharts: [...prevState.stockCharts, result]
}));

Now in render

render(){
   this.state.stockCharts.map((data, i) => {
      console.log("data", data); // this will give each object
      console.log("Meta Data", data["Meta Data"]); //This will give meta data information
      console.log("Weekly Time Series", data["Weekly Time Series"]);// this will print weekly time information
   });
   return(

   )
}

Is this what your expectation?

answered Aug 17, 2018 at 4:21

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

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

3 Comments

bflynnigan Over a year ago

Nice man, this works and I can now do things like console.log(this.state.stockCharts[0]["Meta Data"]) Cheers boss

Hemadri Dasari Over a year ago

NP. You can also do in that way but since its array of objects I always prefer using map than doing for loop or directly accessing with index position. Glad I am able to help you :)

Jacob Over a year ago

@HemadriDasari should logic really be handled in the render, seems like it could be in componentDidMount, I dunno I usually avoid a lot of logic in there.

NotAWizzard · Accepted Answer · 2018-08-17 04:39:08Z

1

It might be because you mutate the state which is not recommended. try instead of calling this.state.stockCharts.push(result) do this.setState({stockCharts: [...this.state.stockCharts, result]})

https://reactjs.org/docs/state-and-lifecycle.html

answered Aug 17, 2018 at 4:39

NotAWizzard

1571 silver badge9 bronze badges

Collectives™ on Stack Overflow

Unable to access element from array of JSON objects

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related