試圖在相同的鍵下對一組對象進行分組，從而產生一個新的對象數組

Question

我有一個由對象組成的messages數組，其中每個對象代表一條消息，而created_at鍵代表消息的日期。 我正在從 API 接收這些數據。 這是我得到的結構：

let messages = [
  {text: "A", status: 'r', created_at: "2020-02-06"},
  {text: "B", status: 's', created_at: "2020-02-06"},
  {text: "C", status: 'r', created_at: "2020-02-06"},
  {text: "D", status: 's', created_at: "2020-02-07"},
  {text: "E", status: 's', created_at: "2020-02-07"},
  {text: "F", status: 'r', created_at: "2020-02-09"},
  {text: "G", status: 's', created_at: "2020-02-09"},
  {text: "H", status: 's', created_at: "2020-02-10"}
]

我正在使用vuejs在聊天應用程序（類似於 WhatsApp）中呈現這些消息，我想在其中按時間順序顯示頂部的日期和該日期下的消息，就像 WhatsApp 一樣。 我正在按時間順序從 API 接收消息，就像我上面粘貼的messages數組一樣。 我想要以下輸出，以便我可以在vuejs使用v-for directive循環遍歷messages並根據它們的創建日期呈現它們：

  output:
    [
      {
        dt: "2020-02-06",
        arr: [
            {text: "A", status: 'r', created_at: "2020-02-06"},
            {text: "B", status: 's', created_at: "2020-02-06"},
            {text: "C", status: 'r', created_at: "2020-02-06"},
        ]
      },
      {
        dt: "2020-02-07",
        arr: [
            {text: "D", status: 's', created_at: "2020-02-06"},
            {text: "E", status: 's', created_at: "2020-02-06"},
        ]
      },
      {
        dt: "2020-02-09",
        arr: [
            {text: "F", status: 'r', created_at: "2020-02-09"},
            {text: "G", status: 's', created_at: "2020-02-09"},
        ]
      },
        {
        dt: "2020-02-10",
        arr: [
           {text: "H", status: 's', created_at: "2020-02-10"}
        ]
      },
    ]

lodash 中是否有可以直接實現此目的的庫？

到目前為止我嘗試過的：

我能夠在不重復日期的情況下對數組中的日期進行分組，如下所示：

let dates = messages.map((item => {
    return item.created_at
}))
let uniq = [...new Set(dates)];
console.log(uniq)

...這給出了以下輸出：

uniq = ["2020-02-06", "2020-02-07", "2020-02-09", "2020-02-10"]

我無法提前。

提前致謝！

Answer 1

使用 lodash 按created_at分組，然后映射到需要的格式：

 const messages = [ {text: "A", status: 'r', created_at: "2020-02-06"}, {text: "B", status: 's', created_at: "2020-02-06"}, {text: "C", status: 'r', created_at: "2020-02-06"}, {text: "D", status: 's', created_at: "2020-02-07"}, {text: "E", status: 's', created_at: "2020-02-07"}, {text: "F", status: 'r', created_at: "2020-02-09"}, {text: "G", status: 's', created_at: "2020-02-09"}, {text: "H", status: 's', created_at: "2020-02-10"} ] const result = _.map( _.groupBy(messages, 'created_at'), (arr, dt) => ({ dt, arr }) ) console.log(result)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

Answer 2

如果不需要，則不需要大型庫 - 遍歷數組並將其組織成一個對象，其中鍵是日期，值是每個日期的數組。 然后映射對象的條目以將其轉換為對象數組：

 let messages = [ {text: "A", status: 'r', created_at: "2020-02-06"}, {text: "B", status: 's', created_at: "2020-02-06"}, {text: "C", status: 'r', created_at: "2020-02-06"}, {text: "D", status: 's', created_at: "2020-02-07"}, {text: "E", status: 's', created_at: "2020-02-07"}, {text: "F", status: 'r', created_at: "2020-02-09"}, {text: "G", status: 's', created_at: "2020-02-09"}, {text: "H", status: 's', created_at: "2020-02-10"} ]; const messagesByDate = {}; for (const message of messages) { if (!messagesByDate[message.created_at]) { messagesByDate[message.created_at] = []; } messagesByDate[message.created_at].push(message); } const output = Object.entries(messagesByDate).map(([dt, arr]) => ({ dt, arr })); console.log(output);

Answer 3

使用reduce構建對象並獲取Object.values將簡化。

 const update = data => { return Object.values( data.reduce((acc, curr) => { const dt = curr.created_at; acc[dt] = dt in acc ? { dt, arr: [...acc[dt].arr, { ...curr }] } : { dt, arr: [{ ...curr }] }; return acc; }, {}) ); }; let messages = [ { text: "A", status: "r", created_at: "2020-02-06" }, { text: "B", status: "s", created_at: "2020-02-06" }, { text: "C", status: "r", created_at: "2020-02-06" }, { text: "D", status: "s", created_at: "2020-02-07" }, { text: "E", status: "s", created_at: "2020-02-07" }, { text: "F", status: "r", created_at: "2020-02-09" }, { text: "G", status: "s", created_at: "2020-02-09" }, { text: "H", status: "s", created_at: "2020-02-10" } ]; console.log(update(messages));

Answer 4

我在不使用任何外部庫的情況下找到了解決方案：

 const messages = [ {text: "A", status: 'r', created_at: "2020-02-06"}, {text: "B", status: 's', created_at: "2020-02-06"}, {text: "C", status: 'r', created_at: "2020-02-06"}, {text: "D", status: 's', created_at: "2020-02-07"}, {text: "E", status: 's', created_at: "2020-02-07"}, {text: "F", status: 'r', created_at: "2020-02-09"}, {text: "G", status: 's', created_at: "2020-02-09"}, {text: "H", status: 's', created_at: "2020-02-10"} ] let dupDates = messages.map((item => { return item.created_at })) let uniq = [...new Set(dupDates)]; let grouping = uniq.map(uniqItem => { let ret = messages.filter(msg => { return msg.created_at === uniqItem }) return { dt: uniqItem, arr: ret } }) console.log(grouping)