从 JSON 数据格式化分组数据答案

【问题标题】：Format grouped data from JSON data从 JSON 数据格式化分组数据
【发布时间】：2020-08-19 13:30:24
【问题描述】：

我正在尝试格式化从 JSON 获得的分组数据，但在执行此操作时遇到了麻烦。

这是我的对象数组：

arr = [
            {
                "date": "2020-01-01",
                "metric": 32,
                "type": "Google"
            },
            {
                "date": "2020-01-01",
                "metric": 24,
                "type": "Bing"
            },
            {
                "date": "2020-01-02",
                "metric": 1,
                "type": "Google"
            },
            {
                "date": "2020-01-02",
                "metric": 32,
                "type": "Jeeves"
            },
            {
                "date": "2020-01-03",
                "metric": 24,
                "type": "Bing"
            },
            {
                "date": "2020-01-03",
                "metric": 30,
                "type": "Google"
            }
          ]

我想按日期对所有指标进行分组。所以我这样做了：

const groupBy = (array, key) => {
    return array.reduce((result, currentValue) => {
      (result[currentValue[key]] = result[currentValue[key]] || []).push(currentValue);
      return result;
    }, {});
};

const personGroupedByColor = groupBy(arr, 'date');

当我这样做时：

2020-01-01: 
0: {date: "2020-01-01", metric: 32, type: "Google"}
1: {date: "2020-01-01", metric: 24, type: "Bing"}
2020-01-02: 
0: {date: "2020-01-02", metric: 1, type: "Google"}
1: {date: "2020-01-02", metric: 32, type: "Jeeves"}
2020-01-03: 
0: {date: "2020-01-03", metric: 24, type: "Bing"}
1: {date: "2020-01-03", metric: 30, type: "Google"}

我有什么办法可以将数据格式化为如下所示：

{"date_val": "2020-01-01", "metric_name": [32, 24]}
{"date_val": "2020-01-02", "metric_name": [1, 32]}
{"date_val": "2020-01-03", "metric_name": [24, 30]}

如何将其格式化为如下所示？我的数据是动态的，所以我希望能够尽可能少地硬编码。

【问题讨论】：

标签： javascript jquery arrays json ecmascript-6

【解决方案1】：

做这样的事

  Object.entries(personGroupedByColor).map(([key, group]) => ({
    ['date_val']: key,
    ['metric_name']: group.map(entry => entry.metric),
  }))

【讨论】：

【解决方案2】：

您可以reduce() 数组并检查给定日期是否已经在累加器中，如果是，则将当前日期推送给它，否则在数组中创建一个具有该日期的新对象：

arr = [{
    date: "2020-01-01",
    metric: 32,
    type: "Google",
  },
  {
    date: "2020-01-01",
    metric: 24,
    type: "Bing",
  },
  {
    date: "2020-01-02",
    metric: 1,
    type: "Google",
  },
  {
    date: "2020-01-02",
    metric: 32,
    type: "Jeeves",
  },
  {
    date: "2020-01-03",
    metric: 24,
    type: "Bing",
  },
  {
    date: "2020-01-03",
    metric: 30,
    type: "Google",
  },
];

let result = arr.reduce((p, c) => {
  let match = p.find(o => o.date_val === c.date);
  if (match) {
    match.metric_name.push(c.metric)
  } else {
    p.push({
      date_val: c.date,
      metric_name: [c.metric],
    });
  }
  return p;
}, []);

console.log(result);

【讨论】：

【解决方案3】：

您可以使用array.reduce 并根据指定字段动态评估结果键：

let arr = [
            {
                "date": "2020-01-01",
                "metric": 32,
                "type": "Google"
            },
            {
                "date": "2020-01-01",
                "metric": 24,
                "type": "Bing"
            },
            {
                "date": "2020-01-02",
                "metric": 1,
                "type": "Google"
            },
            {
                "date": "2020-01-02",
                "metric": 32,
                "type": "Jeeves"
            },
            {
                "date": "2020-01-03",
                "metric": 24,
                "type": "Bing"
            },
            {
                "date": "2020-01-03",
                "metric": 30,
                "type": "Google"
            }
          ];
          
  let group = (arr, val, name) => arr.reduce((acc, curr) => {
      let valKey = val +"_val";
      let nameKey = name + "_name";
      let valValue = curr[val];
      let nameValue = curr[name];
      
      let existing = acc.find(x => x[valKey] === valValue);
      if(existing){
         existing[nameKey].push(nameValue);
      } else {
         acc.push({[valKey]: valValue, [nameKey]: [nameValue]})
      }
      return acc;
  }, []);
  
  console.log(group(arr, 'date', 'metric'))

【讨论】：