在 JS 中按日期排列聊天消息

Question

我看过这个，但它并没有解决我的问题： 如何按日期对数组中的项目进行分组？

我想按日期排列这条聊天消息，我已经成功地使用 AJAX 从数据库中检索消息。

这是控制台中检索到的聊天记录。

[
    [
        "Paul Abioro",
        "[email protected]",
        "chester",
        "Teejay",
        "Hi Teejay",
        "3",
        "2023-04-06 17:42:54"
    ],
    [
        "Paul Abioro",
        "[email protected]",
        "chester",
        "Teejay",
        "How are you doing?",
        "3",
        "2023-04-06 17:42:58"
    ],
    [
        "Teejay Bello",
        "[email protected]",
        "Teejay",
        "chester",
        "I'm Fine",
        "2",
        "2023-04-06 19:00:42"
    ],
    [
        "Paul Abioro",
        "[email protected]",
        "chester",
        "Teejay",
        "Testing",
        "3",
        "2023-04-08 10:12:38"
    ],
    [
        "Teejay Bello",
        "[email protected]",
        "Teejay",
        "Chester",
        "Testing what?",
        "2",
        "2023-04-08 10:21:09"
    ],
    [
        "Paul Abioro",
        "[email protected]",
        "chester",
        "Teejay",
        "How can we help you?",
        "3",
        "2023-04-08 10:38:25"
    ]
]

我想做什么

[
  date": "2023-04-06",
  chat":[
        "Paul Abioro",
        "[email protected]",
        "chester",
        "Teejay",
        "Hi Teejay",
        "3",
        "2023-04-06 17:42:54"
    ],
    [
        "Paul Abioro",
        "[email protected]",
        "chester",
        "Teejay",
        "How are you doing?",
        "3",
        "2023-04-06 17:42:58"
    ],
    [
        "Teejay Bello",
        "[email protected]",
        "Teejay",
        "chester",
        "I'm Fine",
        "2",
        "2023-04-06 19:00:42"
    ],

 date": "2023-04-08",
   chat":[
        "Paul Abioro",
        "[email protected]",
        "chester",
        "Teejay",
        "Testing",
        "3",
        "2023-04-08 10:12:38"
    ],
    [
        "Teejay Bello",
        "[email protected]",
        "Teejay",
        "Chester",
        "Testing what?",
        "2",
        "2023-04-08 10:21:09"
    ],
    [
        "Paul Abioro",
        "[email protected]",
        "chester",
        "Teejay",
        "How can we help you?",
        "3",
        "2023-04-08 10:38:25"
    ]
]

我希望你明白了。谢谢！

Answer 1

您可以使用数组

reduce

分组为一个对象，然后使用

Object.values

获取减少对象的值数组。
如果您希望对象按日期而不是数组分组，请删除

Object.values

日期部分可以使用
获得

curr[curr.length-1].split(" ")[0]

或

curr.at(-1).split(" ")[0]

如果你的环境支持

at

const a = [    [        "Paul Abioro",        "[email protected]",        "chester",        "Teejay",        "Hi Teejay",        "3",        "2023-04-06 17:42:54"    ],    [        "Paul Abioro",        "[email protected]",        "chester",        "Teejay",        "How are you doing?",        "3",        "2023-04-06 17:42:58"    ],    [        "Teejay Bello",        "[email protected]",        "Teejay",        "chester",        "I'm Fine",        "2",        "2023-04-06 19:00:42"    ],    [        "Paul Abioro",        "[email protected]",        "chester",        "Teejay",        "Testing",        "3",        "2023-04-08 10:12:38"    ],    [        "Teejay Bello",        "[email protected]",        "Teejay",        "Chester",        "Testing what?",        "2",        "2023-04-08 10:21:09"    ],    [        "Paul Abioro",        "[email protected]",        "chester",        "Teejay",        "How can we help you?",        "3",        "2023-04-08 10:38:25"    ]]

const res = Object.values(a.reduce((acc,curr) => {
  const date = curr[curr.length-1].split(" ")[0]
  acc[date]??={date,chat:[]} //or acc[date] = acc[date] || {date,chat:[]}
  acc[date].chat.push(curr)
  return acc
},{}))

console.log(res)

Answer 2

您可以使用

reduce

得到结果：

const chatArray = [
    [
        "Paul Abioro",
        "[email protected]",
        "chester",
        "Teejay",
        "Hi Teejay",
        "3",
        "2023-04-06 17:42:54"
    ],
    [
        "Paul Abioro",
        "[email protected]",
        "chester",
        "Teejay",
        "How are you doing?",
        "3",
        "2023-04-06 17:42:58"
    ],
    [
        "Teejay Bello",
        "[email protected]",
        "Teejay",
        "chester",
        "I'm Fine",
        "2",
        "2023-04-06 19:00:42"
    ],
    [
        "Paul Abioro",
        "[email protected]",
        "chester",
        "Teejay",
        "Testing",
        "3",
        "2023-04-08 10:12:38"
    ],
    [
        "Teejay Bello",
        "[email protected]",
        "Teejay",
        "Chester",
        "Testing what?",
        "2",
        "2023-04-08 10:21:09"
    ],
    [
        "Paul Abioro",
        "[email protected]",
        "chester",
        "Teejay",
        "How can we help you?",
        "3",
        "2023-04-08 10:38:25"
    ]
]



const result = chatArray.reduce((acc, cur) => {
    const lastIndex = cur.length - 1;
    const date = cur[lastIndex]?.split(" ")[0];
    const chat = cur.slice(0, lastIndex);
    acc[date] = acc[date]?.concat([chat]) || [chat];
    return acc;
  }, {});
  
const chatObject = Object.entries(result).map(([date, chat]) => ({ date, chat }));
  
console.log(chatObject);