如何使用来自 Ajax 响应的日期对数组数据进行分组？答案

【问题标题】：How To Grouping Array Data With Date From Ajax Response?如何使用来自 Ajax 响应的日期对数组数据进行分组？
【发布时间】：2020-03-31 04:08:31
【问题描述】：

我有这样的数组数据

[{ 
   date: "January 2019",
   sum: 20,
   name: "Persada",
},{ 
   date: "Februay 2019",
   sum: 21,
   name: "Persada",
},{ 
   date: "April 2019",
   sum: 22,
   name: "Persada",
},{ 
   date: "January 2019",
   sum: 10,
   name: "Kharisma",
},{ 
   date: "March 2019",
   sum: 5,
   name: "Kharisma",
},{ 
   date: "Februari 2019",
   sum: 4,
   name: "Solusindo",
},{ 
   date: "Mai 2019",
   sum: 2,
   name: "Solusindo",
}]

根据上面的数据，我选择了不同的日期。所以我得到了这样的约会

["January 2019", "February 2019", "March 2019", "April 2019", "Mai 2019"]

然后我想设置这样的数据

[{
   date : ["January 2019", "February 2019", "March 2019", "April 2019", "Mai 2019"],
   sum: [20, 21, 0, 22, 0],
   name: "Persada",
},{
   date : ["January 2019", "February 2019", "March 2019", "April 2019", "Mai 2019"],
   sum: [0, 0, 10, 5, 0],
   name: "Kharisma",
},{
   date : ["January 2019", "February 2019", "March 2019", "April 2019", "Mai 2019"],
   sum: [0, 4, 0, 0, 2],
   name: "Solusindo",
}]

如果该日期没有数据，那么数据总和将自动替换为0。请帮我设置这样的数据。谢谢

【问题讨论】：

我发现从服务器/数据库返回正确格式的数据更有用。

标签： javascript jquery arrays ajax

【解决方案1】：

从响应中提取唯一日期（使用Set、Array.from 创建初始条目）
从初始日期条目创建字典（使用Object.entries 创建字典表单数组）
使用Array.prototype.reduce 创建一个date and sum 的字典，以name 作为键
使用Object.entries 循环遍历字典以创建结果集。
使用Object.keys 从日期字典中提取dates
使用Object.values 从日期字典中提取sum

const response = [{
  date: "January 2019",
  sum: 20,
  name: "Persada",
}, {
  date: "Februay 2019",
  sum: 21,
  name: "Persada",
}, {
  date: "April 2019",
  sum: 22,
  name: "Persada",
}, {
  date: "January 2019",
  sum: 10,
  name: "Kharisma",
}, {
  date: "March 2019",
  sum: 5,
  name: "Kharisma",
}, {
  date: "Februari 2019",
  sum: 4,
  name: "Solusindo",
}, {
  date: "Mai 2019",
  sum: 2,
  name: "Solusindo",
}];

const initialValues = Array.from(new Set(response.map(({date}) => date)), date => [date, 0]);

const dictionary = response.reduce((acc, {
  date,
  sum,
  name
}) => {
  acc[name] = acc[name] || Object.fromEntries(initialValues);

  acc[name][date] = (acc[name][date] || 0) + sum;

  return acc;
}, {});

const result = Object.entries(dictionary).map(([name, sumByDate]) => ({
  date: Object.keys(sumByDate),
  sum: Object.values(sumByDate),
  name
}));


console.log(result);

.as-console-wrapper {
  max-height: 100vh !important;
  top: 0;
}

【讨论】：

【解决方案2】：

1) 使用 name 的唯一键和总和、日期、名称的值构建一个对象。
2) 使用forEach 循环遍历数据，如果键不存在，则添加sum 的默认值，数组为'0'，数组大小为日期。
3) 更新各自的sum 值。
4) 在函数中将res 的Object 值作为数组返回。

const update = data => {
  const dates = [
    "January 2019",
    "February 2019",
    "March 2019",
    "April 2019",
    "Mai 2019"
  ];
  // Alternatively get the dates like
  // const dates = [...new Set(data.map(({date}) => date))];
  const sums = dates.map(x => 0);
  const res = {};
  data.forEach(({ name, sum, date }) => {
    if (!res[name]) {
      res[name] = { date: [...dates], sum: [...sums], name };
    }
    const index = dates.findIndex(month => month === date);
    if (index !== -1) {
      res[name]["sum"][index] = sum;
    }
  });
  return Object.values(res);
};

const data = [
  {
    date: "January 2019",
    sum: 20,
    name: "Persada"
  },
  {
    date: "Februay 2019",
    sum: 21,
    name: "Persada"
  },
  {
    date: "April 2019",
    sum: 22,
    name: "Persada"
  },
  {
    date: "January 2019",
    sum: 10,
    name: "Kharisma"
  },
  {
    date: "March 2019",
    sum: 5,
    name: "Kharisma"
  },
  {
    date: "Februari 2019",
    sum: 4,
    name: "Solusindo"
  },
  {
    date: "Mai 2019",
    sum: 2,
    name: "Solusindo"
  }
];

console.log(update(data));

【讨论】：