如何将JSON数据动态渲染为按位置分组的表格？

要搞定这个「位置去重后房间无法对应」的问题，核心是先把原始JSON数据按位置做分组处理，再基于分组后的数据渲染表格，同时保证新增数据时表格能自动适配。

第一步：按位置分组数据 #

用Array.reduce()方法把原始数据按位置归类，生成一个以位置为键、对应房间数组为值的对象，精准关联每个位置的所有房间：

// 假设你的原始数据是名为data的数组
const groupedData = data.reduce((acc, item) => {
  // 如果当前位置还没在分组对象里，初始化空数组
  if (!acc[item.location]) {
    acc[item.location] = [];
  }
  // 将当前房间加入对应位置的数组
  acc[item.location].push(item.room);
  return acc;
}, {});

第二步：渲染动态表格（以React为例） #

基于分组后的数据渲染表格，同时监听数据变化，新增数据时自动更新分组并刷新表格：

import { useState, useEffect } from 'react';
import data from './data.json';

function App() {
  const [groupedTableData, setGroupedTableData] = useState({});

  // 初始化或数据更新时重新分组
  useEffect(() => {
    const grouped = data.reduce((acc, item) => {
      if (!acc[item.location]) {
        acc[item.location] = [];
      }
      acc[item.location].push(item.room);
      return acc;
    }, {});
    setGroupedTableData(grouped);
  }, [data]); // 依赖data，数据新增/修改时自动触发

  // 新增数据的示例函数
  const addNewRoom = (newLocation, newRoom) => {
    // 实际项目中可根据数据源调整，比如更新状态或调用接口
    data.push({ location: newLocation, room: newRoom });
    // 直接更新分组数据，避免重新遍历全量数据（可选优化）
    setGroupedTableData(prev => ({
      ...prev,
      [newLocation]: [...(prev[newLocation] || []), newRoom]
    }));
  };

  return (
    <div>
      <table border="1" cellPadding="8">
        <thead>
          <tr>
            <th>位置</th>
            <th>房间</th>
          </tr>
        </thead>
        <tbody>
          {/* 遍历分组后的数据渲染每一行 */}
          {Object.entries(groupedTableData).map(([location, rooms]) => (
            <tr key={location}>
              <td>{location}</td>
              <td>{rooms.join('、')}</td>
            </tr>
          ))}
        </tbody>
      </table>
      {/* 新增数据的示例按钮，实际可替换为输入表单 */}
      <button onClick={() => addNewRoom('办公区', '会议室B')} style={{ marginTop: '16px' }}>
        新增位置/房间
      </button>
    </div>
  );
}

export default App;

关键说明 #

1. 分组逻辑：reduce方法是高效的分组方式，确保每个位置只出现一次，且对应所有关联的房间
2. 动态更新：通过useEffect监听数据源变化，新增或修改数据时自动重新分组，保证表格数据实时同步
3. 性能优化：新增数据时可以直接更新分组后的状态，无需重新遍历全量数据，提升响应速度

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