Блог

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

 {
  data.map(graph =>
    <div key={graph.ID} className="tables">
      <table>
      <tr>
        <th>{Object.keys(graph)[0]}</th>
        <th>{Object.keys(graph)[1]}</th>
        <th>{Object.keys(graph)[2]}</th>
        <th>{Object.keys(graph)[3]}</th>
        <th>{Object.keys(graph)[4]}</th>
        <th>{Object.keys(graph)[5]}</th>
        <th>{Object.keys(graph)[6]}</th>
        <th>{Object.keys(graph)[7]}</th>
        <th>{Object.keys(graph)[8]}</th>
        <th>{Object.keys(graph)[9]}</th>
        <th>{Object.keys(graph)[10]}</th>
        <th>{Object.keys(graph)[11]}</th>
        <th>{Object.keys(graph)[12]}</th>
        <th>{Object.keys(graph)[13]}</th>
      </tr>
      <tr>
        <td>{Object.values(graph)[0]}</td>
        <td>{Object.values(graph)[1]}</td>
        <td>{Object.values(graph)[2]}</td>
        <td>{Object.values(graph)[3]}</td>
        <td>{Object.values(graph)[4]}</td>
        <td>{Object.values(graph)[5]}</td>
        <td>{Object.values(graph)[6]}</td>
        <td>{Object.values(graph)[7]}</td>
        <td>{Object.values(graph)[8]}</td>
        <td>{Object.values(graph)[9]}</td>
        <td>{Object.values(graph)[10]}</td>
        <td>{Object.values(graph)[11]}</td>
        <td>{Object.values(graph)[12]}</td>
        <td>{Object.values(graph)[13]}</td>
      </tr>
      </table>
    </div>
  )
}
 

Как вы можете видеть, каждая запись в таблице представляет собой отдельный ключ / значение и graph представляет каждый отдельный объект в массиве. Проблема в том, что некоторые объекты имеют более 14 ключей, поэтому я хочу перечислить каждый ключ и значение в каждом объекте в JSX независимо от размера. Кто-нибудь знает, как это сделать? Я пытался использовать циклы for (обычно так я перечисляю отдельные ключи), но, похоже, я не могу этого сделать в JSX.

Используйте Array.map() для каждой строки. Для th итерации ключей и для td использования Object.entries() для получения как ключей (для ключей элемента), так и значений:

 {
  data.map(graph => (
    <div key={graph.ID} className="tables">
      <table>
        <tr>
        {
          Object.keys(graph)
            .map(key => <th key={key}>{key}</th>)
        }
        </tr>
        <tr>
        {
          Object.entries(graph)
            .map(([key, val]) => <th key={key}>{val}</th>)
        }
        </tr>
      </table>
    </div>
  ))
}
 

Я думаю, вы могли бы сделать что-то вроде этого:

 {
  data.map(graph => {
    return (
      <div key={graph.ID} className="tables">
        <table>
          <tr>
            {Object.keys(graph).map(key => {
              return <th>{key}</th>
            })}
          </tr>
          <tr>
            {Object.keys(graph).map(key => {
              return <th>{graph[key]}</th>
            })}
          </tr>
        </table>
      </div>
    )
  })
}
 

Вы можете просто использовать map() метод для этого:

 <tr>
  Object.keys(graph).map((key) => (<th>key</th>))
</tr>
<tr>
  Object.values(graph).map((value) => (<td>value</td>))
</tr>
 

Примечание: это, скорее всего, будет жаловаться на отсутствие key реквизитов, поэтому вам придется добавлять ключевое значение к каждому элементу. (использование значения ключа graph объекта является одним из вариантов)