Group array of object by some element followed by another element

Question

I want to build a chat list where it grouped by unread messages followed by a date (in epoch format)

const myData = {
  "4072b701-a799-4951-be60-3f2d461bf482": {
    "id": "4072b701-a799-4951-be60-3f2d461bf482",
    "from": "BOT",
    "to": "b740849b-7553-4ddc-945e-b986aff854bb",
    "message": "Glad to connect!",
    "timestamp": "2019-06-18T04:30:56.188Z",
    "isOwner": false,
    "isRead": true
  },
  "1b2c0e15-a3b3-4994-8fda-e38e3cdc8d05": {
    "id": "1b2c0e15-a3b3-4994-8fda-e38e3cdc8d05",
    "from": "BOT",
    "to": "b740849b-7553-4ddc-945e-b986aff854bb",
    "message": "We have offices in San Jose, CA, Malaysia, Singapore and India",
    "timestamp": "2019-06-18T04:30:58.189Z",
    "isOwner": false,
    "isRead": true
  },
  "9613038a-b78a-4afe-aa2d-71d1a8292ec7": {
    "id": "9613038a-b78a-4afe-aa2d-71d1a8292ec7",
    "from": "BOT",
    "to": "b740849b-7553-4ddc-945e-b986aff854bb",
    "message": "Ask away, or select from below options",
    "timestamp": "2019-06-18T04:30:58.190Z",
    "isOwner": false,
    "isRead": true
  },
  "d409a190-6278-490b-9bf6-f3489b0a1cb5": {
    "id": "d409a190-6278-490b-9bf6-f3489b0a1cb5",
    "from": "b740849b-7553-4ddc-945e-b986aff854bb",
    "to": "BOT",
    "message": "this",
    "timestamp": "2019-06-18T04:32:55.356Z",
    "isOwner": true,
    "isRead": true
  },
  "acfc975f-f522-472d-a1f4-18a737da00f2": {
    "id": "acfc975f-f522-472d-a1f4-18a737da00f2",
    "from": "BOT",
    "to": "b740849b-7553-4ddc-945e-b986aff854bb",
    "message": "Glad to connect!",
    "timestamp": "2019-06-20T22:50:29.714Z",
    "isOwner": false,
    "isRead": false
  },
  "d409a190-6278-490b-9bf6-f3489b0a1cb5": {
    "id": "d409a190-6278-490b-9bf6-f3489b0a1cb5",
    "from": "b740849b-7553-4ddc-945e-b986aff854bb",
    "to": "BOT",
    "message": "this",
    "timestamp": "2019-06-21T04:32:55.356Z",
    "isOwner": true,
    "isRead": false
  },
};
const newObj = Object.keys(myData)
  .map(objId => myData[objId])
  .reduce((acc, value) => {
    const date = value.timestamp;
    if (!acc[date]) {
      acc[date] = [];
    }
    acc[date].push(value);

    return acc;
  }, {});

console.log(newObj);

As you can see I still have not sort the timestamp properly yet. So I missed to group the isRead flag and I really want the date variable in epoch format and only store the date

I expect the output like this

{
   read: {
     1489520157124: [{...}], // this is dummy epoch time
     1489520157154: [{...}]
   },
   unread: {
     1489520157124: [{...}], // this is dummy epoch time
     1489520157154: [{...}]
   }
}

You can use Date.parse() to convert the timestamp to epoch format. — Barmar
– Barmar, Commented Jun 21, 2019 at 0:15

Barmar · Accepted Answer · 2019-06-21 00:31:15Z

1

Add the read and unread properties to the accumulator object, and push the object onto the appropriate property.

Use Date.parse() to convert the timestamp to epoch time.

const myData = {
  "4072b701-a799-4951-be60-3f2d461bf482": {
    "id": "4072b701-a799-4951-be60-3f2d461bf482",
    "from": "BOT",
    "to": "b740849b-7553-4ddc-945e-b986aff854bb",
    "message": "Glad to connect!",
    "timestamp": "2019-06-18T04:30:56.188Z",
    "isOwner": false,
    "isRead": true
  },
  "1b2c0e15-a3b3-4994-8fda-e38e3cdc8d05": {
    "id": "1b2c0e15-a3b3-4994-8fda-e38e3cdc8d05",
    "from": "BOT",
    "to": "b740849b-7553-4ddc-945e-b986aff854bb",
    "message": "We have offices in San Jose, CA, Malaysia, Singapore and India",
    "timestamp": "2019-06-18T04:30:58.189Z",
    "isOwner": false,
    "isRead": true
  },
  "9613038a-b78a-4afe-aa2d-71d1a8292ec7": {
    "id": "9613038a-b78a-4afe-aa2d-71d1a8292ec7",
    "from": "BOT",
    "to": "b740849b-7553-4ddc-945e-b986aff854bb",
    "message": "Ask away, or select from below options",
    "timestamp": "2019-06-18T04:30:58.190Z",
    "isOwner": false,
    "isRead": true
  },
  "d409a190-6278-490b-9bf6-f3489b0a1cb5": {
    "id": "d409a190-6278-490b-9bf6-f3489b0a1cb5",
    "from": "b740849b-7553-4ddc-945e-b986aff854bb",
    "to": "BOT",
    "message": "this",
    "timestamp": "2019-06-18T04:32:55.356Z",
    "isOwner": true,
    "isRead": true
  },
  "acfc975f-f522-472d-a1f4-18a737da00f2": {
    "id": "acfc975f-f522-472d-a1f4-18a737da00f2",
    "from": "BOT",
    "to": "b740849b-7553-4ddc-945e-b986aff854bb",
    "message": "Glad to connect!",
    "timestamp": "2019-06-20T22:50:29.714Z",
    "isOwner": false,
    "isRead": false
  },
  "d409a190-6278-490b-9bf6-f3489b0a1cb5": {
    "id": "d409a190-6278-490b-9bf6-f3489b0a1cb5",
    "from": "b740849b-7553-4ddc-945e-b986aff854bb",
    "to": "BOT",
    "message": "this",
    "timestamp": "2019-06-21T04:32:55.356Z",
    "isOwner": true,
    "isRead": false
  },
};
const newObj = Object.values(myData)
  .reduce((acc, value) => {
    const date = Date.parse(value.timestamp);
    const prop = value.isRead ? "read" : "unread";
    if (!acc[prop][date]) {
      acc[prop][date] = [];
    }
    acc[prop][date].push(value);

    return acc;
  }, {read: {}, unread: {}});

console.log(newObj);

edited Jun 21, 2019 at 0:31

answered Jun 21, 2019 at 0:22

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Drew Reese Over a year ago

FYI, Object.keys(myData).map(objId => myData[objId]) is equivalent to Object.values(myData)

Muhaimin CS Over a year ago

but I don't think Date.parse works. It didn't take the date string

Barmar Over a year ago

I don't understand why. It appears to match the standard date/time string format: tc39.es/ecma262/#sec-date-time-string-format

Collectives™ on Stack Overflow

Group array of object by some element followed by another element

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related