CODEWITHSUNDEEP
reactjsloopsobjectnested
dragi
dragi

Reputation: 1512

Mapping through a nested object in React

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?

Upvotes: 1

Views: 65

Answers (1)

Christian Santos
Christian Santos

Reputation: 5456

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>

Upvotes: 1

Related Questions