JavaScript 重构MySQL查询JSON为适配DataTables结构并补全缺失日期值

• 按rep字段对原始数据分组，自动识别所有代表
• 预初始化7天的数值位，无对应数据时填充默认值（默认填"0"，可按需调整）
• 按day对应位置累加binder值，自动合并同代表同天的多条记录
• 组装为DataTables要求的{data: [行数组]}二维结构，每行包含代表名、7天数值、总合计

完整实现代码 #

// 原始MySQL返回数据
var data = [{rep:'Test1', day: 1 , binder: 500},
{rep:'Test1', day: 2 , binder: 500},{rep:'Test1', day: 3 , binder: 500},
{rep:'Test2', day: 2 , binder: 500},{rep:'Test2', day: 2 , binder: 500},
{rep:'Test1', day: 4 , binder: 500},{rep:'Test1', day: 5 , binder: 500},
{rep:'Test2', day: 4 , binder: 500},{rep:'Test1', day: 5 , binder: 500},
{rep:'Test1', day: 6 , binder: 500},{rep:'Test2', day: 7 , binder: 500}];

// 转换函数
const transformForDataTables = (rawData) => {
  // 第一步：按rep分组所有记录
  const repGroups = rawData.reduce((groups, item) => {
    if (!groups[item.rep]) groups[item.rep] = [];
    groups[item.rep].push(item);
    return groups;
  }, {});

  const resultRows = [];

  // 第二步：遍历每个rep的分组，生成对应行
  for (const [repName, records] of Object.entries(repGroups)) {
    // 预初始化7天的数组，默认填充"0"，可按需修改默认值
    const dayValues = new Array(7).fill("0");
    let totalBinder = 0;

    // 累加当前rep所有记录的binder值
    records.forEach(record => {
      // day为1-7，对应数组索引为day-1
      const dayIndex = record.day - 1;
      // 转换为数字累加后转回字符串，匹配要求的输出格式
      const currentDayVal = parseInt(dayValues[dayIndex]) || 0;
      dayValues[dayIndex] = (currentDayVal + record.binder).toString();
      totalBinder += record.binder;
    });

    // 组装行结构：代表名 + 7天值 + 总合计
    const row = [repName, ...dayValues, totalBinder.toString()];
    resultRows.push(row);
  }

  // 返回DataTables可直接使用的结构
  return { data: resultRows };
};

// 调用得到最终数据
const dtData = transformForDataTables(data);

实际输出结果 #

运行上述代码后，dtData的输出结构如下（数值为原始数据累加后的真实结果，和要求的结构完全匹配）：

{
  "data": [
    ["Test1", "500", "500", "500", "500", "1000", "500", "0", "3500"],
    ["Test2", "0", "1000", "0", "500", "0", "0", "500", "2000"]
  ]
}

原函数问题修正说明 #

• 原函数仅处理单个传入的repKey，且未预初始化日期字段，只有存在对应记录时才会添加日期属性，导致缺数据时字段缺失
• 现在通过预初始化长度为7的数组，确保无论是否有对应日期的记录，都会输出固定顺序的7天数值位，完全符合DataTables的列对应要求
• 如果需要调整无数据时的默认填充值（比如要求填"500"而非"0"），只需修改new Array(7).fill("0")中的默认值即可

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