Render JSON data with keys from an API using map

Question

I fetch data from my api, JSON is :

{
  Teacher: 53, 
  Student: 0,
  Staff: 1, 
  Finance: 0, 
}

My data are stored in my state when the component didMount so this.total.users contain my JSON data

What is the best way to render this ?

I understood it's JSON with keys, so I'm supposed to use something like

 {Object.keys(this.state.users).map((key) => (   
   <div> {key} </div>   // display Attendee, Student, Staff, Finance
 )}

but its not working, because this.state.users is undefined So I found I can display my entire JSON object with, it works with

 JSON.stringify(this.state.users)}

So I supposed I have to mix both of them but how and when ? i'm a little bit lost.

at the end I just want to have my JSON displayed like:

Attendee   Student   Staff   Finance
   53         0        1        0

Hemadri Dasari · Accepted Answer · 2019-02-12 14:41:50Z

3

You can do something like below

Do conditional check before doing Object.keys so there won’t be any issues when this.state.users is undefined
Use key to get the value like this.state.user[key]

Set the unique key to div so that you will get all the users rendered otherwise only the last one will be rendered

{this.state.users && JSON.stringify(this.state.users, Object.keys(this.state.users).map((key, index) => (   
      <div key={'Key-'+index}>
          <div> {key} </div>   // display Attendee, Student, Staff, Finance
           <div>{this.state.users[key]</div> //this will give you value
       </div>
  )))}

edited Feb 12, 2019 at 14:41

answered Feb 12, 2019 at 14:32

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

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

1 Comment

xif Over a year ago

Thanks for your answer ! It works if I take your answer but without JSON.stringify(this.state.users, Do you know why ? I would like to understand, if you stringify it, it display {} but if I take juste {JSON.stringify(this.state.users)} it shows the entire object.

Collectives™ on Stack Overflow

Render JSON data with keys from an API using map

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related