How to loop through json nested objects in react js

Question

SomeOne please help me. I am spending too long trying to display some data I wish to iterate over a nested object json response using react js and access ["1. open"] after the date. The image of json response

the json data is { "Meta Data": { "1. Information": "Weekly Prices (open, high, low, close) and Volumes", "2. Symbol": "IBM", "3. Last Refreshed": "2022-06-08", "4. Time Zone": "US/Eastern" }, "Weekly Time Series": { "2022-06-08": { "1. open": "142.9800", "2. high": "144.7300", "3. low": "140.1500", "4. close": "140.8300", "5. volume": "10659817" },

render() { console.log(this.state.users);

   return (
     // div>{this.state.users["Meta Data"]["2. Symbol"]}</div>
     <div> {Object.keys(this.state.users).map((item, i) => (
         <div key={i}> {this.state.users[item]["2022-06-08"]} 
              {Object.keys(["2022-06-08"]).map((c, i) => (
                <li key={i}>{["2022-06-08"][c]["1. open"]}</li>
              ))}
         </div>
          


       ))}


    </div> 
   );

But the error shows enter image description here

Can you please paste out your JSON here in the question instead of image? That will help to answer it. — Surjeet Bhadauriya
– Surjeet Bhadauriya, Commented Jun 9, 2022 at 10:24
{ "Meta Data": { "1. Information": "Weekly Prices (open, high, low, close) and Volumes", "2. Symbol": "IBM", "3. Last Refreshed": "2022-06-08", "4. Time Zone": "US/Eastern" }, "Weekly Time Series": { "2022-06-08": { "1. open": "142.9800", "2. high": "144.7300", "3. low": "140.1500", "4. close": "140.8300", "5. volume": "10659817" }, — sony rahul
– sony rahul, Commented Jun 9, 2022 at 10:30

Surjeet Bhadauriya · Accepted Answer · 2022-06-09 10:34:53Z

0

This will work for you. Please refer to the demo too I made for you.

Stackblitz Demo: https://stackblitz.com/edit/react-ts-7zuxq4?file=index.tsx,App.tsx

 <div>
      {Object.keys(weeklyTimeSeries).map((key) => (
        <ul>
          <b>{key}</b>

          {Object.keys(weeklyTimeSeries[key]).map((ckey) => (
            <li>
              {ckey} = {weeklyTimeSeries[key][ckey]}
            </li>
          ))}
        </ul>
      ))}
 </div>

Note: I have made a general demo. So you have to map through your state variable instead of mine.

answered Jun 9, 2022 at 10:34

Surjeet Bhadauriya

7,2223 gold badges39 silver badges54 bronze badges

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

8 Comments

sony rahul Over a year ago

Hello Thank you for helping me. But I am getting error Uncaught Error: Objects are not valid as a React child (found: object with keys {1. open, 2. high, 3. low, 4. close, 5. volume}).

sony rahul Over a year ago

I think it is because the map is not able to get the innermost data of 1.open object

sony rahul Over a year ago

the api data is from this website: alphavantage.co/…

Surjeet Bhadauriya Over a year ago

I think you just need to make one check over this code. So once your data available then only perform this operation.

sony rahul Over a year ago

{Object.keys(this.state.users).map((key) => ( <ul> <b>{key= "Weekly Time Series"}</b> {Object.keys(this.state.users[key]).map((ckey) => ( <li> {ckey} </li> ))} </ul> ))} I got one output

|

R.B.VIJAY · Accepted Answer · 2022-06-09 10:23:28Z

0

use recursive approach to loop through the json object you will get it.

answered Jun 9, 2022 at 10:23

R.B.VIJAY

131 silver badge4 bronze badges

6 Comments

R.B.VIJAY Over a year ago

stackoverflow.com/questions/64973017/… refer this answer

sony rahul Over a year ago

I am not able to recursively loop through. I am creating syntax error i believe. And the link is converting object into arrays but the data I have is pretty long for object to arrray manual conversion

R.B.VIJAY Over a year ago

Add the json data sample if possible

sony rahul Over a year ago

alphavantage.co/… the data is from this website

R.B.VIJAY Over a year ago

I hope you found the solution on previous answer.

|

Collectives™ on Stack Overflow

How to loop through json nested objects in react js

2 Answers 2

8 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related