如何将指定结构的JSON映射为React表格并实现对应展示效果

算力阿峰

2026-9-27

实现思路

第一步提取表头：直接取目标JSON对象的所有可枚举键作为表格列名
第二步组装行数据：所有列对应的数组长度一致，按索引遍历取每个列对应位置的值，拼接为单行数据

完整实现代码

import React from 'react';

// 你的源数据
const rawData = {
  "code": [
    "111111",
    "222222",
    "333333"
  ],
  "name": [
    "nameA",
    "nameB",
    "nameC" // 原示例JSON此处为nameB，和预期表格内容不符，按需调整即可
  ],
  "price": [
    1,
    2,
    3,
  ]
}

const JsonTable = () => {
  // 提取表头列
  const columns = Object.keys(rawData);
  // 取总⾏数，默认取第一列的数组长度，可自行增加非空校验
  const rowCount = rawData[columns[0]].length;

  return (
    <div className="s-table-container">
      <table className="s-table">
        <thead>
          <tr>
            {columns.map(col => (
              <th key={col} style={{textAlign: 'center'}}>{col}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {Array.from({length: rowCount}).map((_, rowIndex) => (
            <tr key={rowIndex}>
              {columns.map(col => (
                <td key={col} style={{textAlign: 'center'}}>{rawData[col][rowIndex]}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

export default JsonTable;