Отображение через вложенный объект в React

#reactjs #loops #object #nested

#reactjs #циклы #объект #вложенный

Вопрос:

Я не мог найти это где-либо еще, так что поехали. Я пытаюсь отобразить вложенный объект и отобразить значения, но все, что я могу получить, это отображаемый ключ.

Объект:

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

Моя функция для перебора через него: (я только хочу отобразить содержимое objectOne)

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

Это возвращает name и otherValue , но не фактические значения.

Чего мне здесь не хватает?

Ответ №1:

Object.keys() возвращает массив ключей в объекте, что объясняет, почему распечатываются только ключи. Попробуйте использовать Object.values() вместо этого (ES2017):

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

В качестве альтернативы, вы можете придерживаться, Object.keys а затем использовать скобки, чтобы получить значение для этого ключа из data.objectOne объекта:

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