Mapping through a nested object in React

Question

I couldn't really find this anywhere else so here we go. I'm trying to map through a nested object and display the values but all I can get is the key displayed.

Object:

data = {
  objectOne: {
    name: "some name",
    otherValue: "something else"
  },
  someValue: "someValue",
  someOtherValue: "asdasd",
  objectTwo : {
    v1 : "v1",
    v2 : "v2",
    v3 : "v3",
  }
}

My function to loop through it: (I only want to display the content of objectOne)

Object.keys(data.objectOne).map(field => <div key={field}>{field}</div>

This returns name and otherValue but not the actual values.

What am I missing here?

Christian Santos · Accepted Answer · 2019-04-11 16:22:33Z

1

Object.keys() returns an array of the keys in the object, which explains why only the keys are being printed out. Try using Object.values() instead (ES2017):

Object.values(data.objectOne).map(value => <div key={value}>{value}</div>

Alternatively, you can stick with Object.keys and then use bracket notation to get the value for that key from the data.objectOne object:

Object.keys(data.objectOne).map(field => <div key={field}>{data.objectOne[field]}</div>

answered Apr 11, 2019 at 16:22

Christian Santos

5,4551 gold badge20 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

Mapping through a nested object in React

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