首页 > 解决方案 > 如何按对象属性值对对象数组进行分组?

问题描述

我有这样的 JSON:

[
  {
    "id": 9,
    "job_id": 302,
    "user_id": 63,
    "message": "User message 1",
    "created_at": 1584091342
  },
  {
    "id": 10,
    "job_id": 302,
    "user_id": 63,
    "message": "User message 2",
    "created_at": 1584095994
  },
  {
    "id": 14,
    "job_id": 302,
    "user_id": 63,
    "message": "Hello",
    "created_at": 1584102257
  },
]

如何按日期对消息进行分组,像这样?(我正在使用 moment.js 来格式化 unix 时间戳)

在此处输入图像描述

标签: javascriptarraysreact-nativegrouping

解决方案


为此,我们可以使用数组函数 reduce:

我们只需要将您的数据在几毫秒内转换为几天。

const data = [
  {
    "id": 9,
    "job_id": 302,
    "user_id": 63,
    "message": "User message 1",
    "created_at": 1584130559280
  },
  {
    "id": 10,
    "job_id": 302,
    "user_id": 63,
    "message": "User message 2",
    "created_at": 1584130559280
  },
  {
    "id": 14,
    "job_id": 302,
    "user_id": 63,
    "message": "Hello",
    "created_at": 1584216959280
  },
  {
    "id": 15,
    "job_id": 302,
    "user_id": 63,
    "message": "World",
    "created_at": 1584216959280
  }  
]

const groupedData = data.reduce((aggObj, child) => {
  const myDate = new Date(child.created_at);
  //console.log(myDate.toDateString());
  //console.log(myDate.getTime());
  if (aggObj.hasOwnProperty(myDate.toDateString())){
    aggObj[myDate.toDateString()].push(child);
  } else {
    aggObj[myDate.toDateString()] = [child];
  }    
  return aggObj
}, {})

console.log(groupedData);
.as-console-wrapper { max-height: 100% !important; top: 0; }

我更改了 created_at 值,所以前两条消息来自昨天,最后两条来自今天。

输出是:

{
  "Fri Mar 13 2020": [
    {
      "id": 9,
      "job_id": 302,
      "user_id": 63,
      "message": "User message 1",
      "created_at": 1584130559280
    },
    {
      "id": 10,
      "job_id": 302,
      "user_id": 63,
      "message": "User message 2",
      "created_at": 1584130559280
    }
  ],
  "Sat Mar 14 2020": [
    {
      "id": 14,
      "job_id": 302,
      "user_id": 63,
      "message": "Hello",
      "created_at": 1584216959280
    },
    {
      "id": 15,
      "job_id": 302,
      "user_id": 63,
      "message": "World",
      "created_at": 1584216959280
    }
  ]
}

推荐阅读