如何将JSON对象数组重构为表格格式（已用Lodash分组）

需求说明 #

已通过Lodash的_.groupBy(dayTargetDetails, trgt => trgt.NAME)将JSON数组按NAME字段分组，需将数据转换为以水果为行、日期为列的表格，填充对应日期的订单数，无数据的单元格留空。

示例JSON数据 #

const dayTargetDetails = [
    {
        "NAME": "APPLE",
        "ORDER_DT": "2022-10-01",
        "ORDERS": 45
    },
    {
        "NAME": "APPLE",
        "ORDER_DT": "2022-10-02",
        "ORDERS": 75
    },
    {
        "NAME": "APPLE",
        "ORDER_DT": "2022-10-03",
        "ORDERS": 15
    },
    {
        "NAME": "APPLE",
        "ORDER_DT": "2022-10-04",
        "ORDERS": 64
    },
    {
        "NAME": "APPLE",
        "ORDER_DT": "2022-10-05",
        "ORDERS": 19
    },
    {
        "NAME": "ORANGE",
        "ORDER_DT": "2022-10-01",
        "ORDERS": 18
    },
    {
        "NAME": "ORANGE",
        "ORDER_DT": "2022-10-02",
        "ORDERS": 26
    }
]

实现步骤与代码 #

1. 分组与基础数据预处理

// 按NAME分组（已提供）
const grouped = _.groupBy(dayTargetDetails, trgt => trgt.NAME);

// 提取所有唯一日期并格式化为MM/DD格式，排序后作为表头列
const allDates = _.uniq(dayTargetDetails.map(item => {
  const [_, month, day] = item.ORDER_DT.split('-');
  return `${month}/${day}`;
})).sort();

// 英文名称到中文名称的映射
const nameMap = {
  'APPLE': '苹果',
  'ORANGE': '橙子'
};

2. 构建表格行数据

将分组后的数据转换为表格所需的行结构，按日期顺序填充订单数：

const tableRows = Object.entries(grouped).map(([name, items]) => {
  // 将当前水果的所有订单转为「日期-订单数」的映射
  const orderMap = _.keyBy(items, item => {
    const [_, month, day] = item.ORDER_DT.split('-');
    return `${month}/${day}`;
  });
  // 按日期顺序匹配订单数，无数据则留空
  const dateValues = allDates.map(date => orderMap[date]?.ORDERS || '');
  // 返回包含水果名称和日期数据的行数组
  return [nameMap[name], ...dateValues];
});

3. 生成HTML表格

通过函数生成符合样式要求的表格HTML：

function generateTable(rows, dates) {
  // 构建表头（含省略号和至月末列）
  const headerContent = `<tr>
    <th style="text-align: center;">水果</th>
    ${dates.map(date => `<th style="text-align: center;">${date}</th>`).join('')}
    <th style="text-align: center;">...</th>
    <th style="text-align: center;">至月末</th>
  </tr>`;
  
  // 构建表体行
  const bodyContent = rows.map(row => `<tr>
    ${row.map(cell => `<td style="text-align: center;">${cell}</td>`).join('')}
    <td style="text-align: center;">..</td>
    <td style="text-align: center;"></td>
  </tr>`).join('');
  
  return `<table class="s-table">
    <thead>${headerContent}</thead>
    <tbody>${bodyContent}</tbody>
  </table>`;
}

// 生成表格并插入到页面容器
const tableHtml = generateTable(tableRows, allDates);
document.getElementById('table-container').innerHTML = tableHtml;

最终效果 #

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