React/JavaScript实现JSON数据表格行转列方案咨询

核心实现逻辑为：提取原数据的属性名作为转置后的行标题，再遍历每行原数据，按属性名匹配对应的值填充到转置表格的对应单元格即可。

完整实现代码 #

const dataArray = [
  { product: "Product 1", year: "2009", sales: "1212" },
  { product: "Product 2", year: "2009", sales: "522" },
  { product: "Product 3", year: "2010", sales: "1337" },
];

// 转置后的行标题，对应原数据的所有属性，支持动态生成
const transposedRowHeaders = Object.keys(dataArray[0]).map(key => 
  key.charAt(0).toUpperCase() + key.slice(1)
)

function App() {
  // 渲染原始表格的行
  const renderOriginalTable = (data, index) => {
    return (
      <tr key={index}>
        <td>{data.product}</td>
        <td>{data.year}</td>
        <td>{data.sales}</td>
      </tr>
    )
  };

  // 渲染转置后表格的行
  const renderTransposedRow = (header, index) => {
    // 标题转小写匹配原数据属性名
    const dataKey = header.toLowerCase()
    return (
      <tr key={index}>
        <th>{header}</th>
        {dataArray.map((item, idx) => (
          <td key={idx}>{item[dataKey]}</td>
        ))}
      </tr>
    )
  }

  return (
    <div className="container">
      <h2>原始表格</h2>
      <table className="originalTable" border="1" cellPadding="8">
        <thead>
          <tr>
            <th>Product</th>
            <th>Year</th>
            <th>Sales</th>
          </tr>
        </thead>
        <tbody>{dataArray.map(renderOriginalTable)}</tbody>
      </table>

      <h2 style={{marginTop: '30px'}}>转置后表格</h2>
      <table className="transposedTable" border="1" cellPadding="8">
        <tbody>
          {transposedRowHeaders.map(renderTransposedRow)}
        </tbody>
      </table>
    </div>
  );
}

export default App

代码说明 #

• 转置行标题支持动态生成，不需要手动写死，后续原数据字段新增、删除时无需修改配置
• 代码中加了border和cellPadding属性方便预览效果，可根据实际需求替换为自定义样式

内容的提问来源于stack exchange，提问作者Krishna