Как перечислить каждое ключевое значение в объекте в React?

#javascript #arrays #reactjs #jsx

#javascript #массивы #reactjs #jsx

Вопрос:

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

         {
          data.map(graph =>
            <div key={graph.ID}>
              <h2>{graph.name}</h2>
            </div>
          )
        }
 

graph это один объект внутри данных. При этом выводится ключ name для каждого объекта в списке. Сейчас у меня возникли проблемы с перечислением каждого отдельного ключа в каждом объекте. Некоторые объекты в списке имеют больше ключей, чем другие, поэтому я не могу просто перечислить каждый ключ вручную. Кто-нибудь знает, как это сделать?

Комментарии:

1. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… и даже developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Ответ №1:

Что вы можете сделать, так это использовать .map() снова, но с помощью Object.keys(obj).map() :

 var graphs = [
  {
    graph: {
      name: "Praveen Kumar",
      age: 27,
      space: "YouTube"
    }
  }, {
    graph: {
      name: "Cat Techie",
      age: 25,
      gender: "Female"
    }
  }
];
console.log(graphs.map(item => {
  return `The value of ${item.graph.name}'s values are:
`   Object.keys(item.graph).map(key => {
    return `- ${key}: ${item.graph[key]}`;
  }).join("n");
})); 

На консоли я получаю это так:

 The value of Praveen Kumar's values are:
- name: Praveen Kumar
- age: 27
- space: YouTube
The value of Cat Techie's values are:
- name: Cat Techie
- age: 25
- gender: Female
 

Два вышеупомянутых объекта имеют разные свойства: space и gender и вы можете использовать Object.keys() для получения их и их значений. Вы также можете использовать Object.entries() too.

Это основная идея. Вы также можете реализовать это в React. Если вам нужно решение React, я с радостью предоставлю то же самое.