vue，数组/项目映射，以便每个 id 扁平化为一个级别

Question

在 Vue 中，我收到了来自 axios 的响应，我将其转储到我的控制台中。它在数据方面看起来不错，但是由于注释类型不同，返回的数据对象每个 item_id 有多个行。这导致我无法在前端每行使用一条记录。

我需要找到正确的方法，让每个 item_id 只有一个主级别，并将 cmets 嵌套在该级别下的一个级别中，这样即使一条记录有 5 种不同的评论/文本类型，它也只是一个 id 的一部分响应记录（我可以在前端使用比较来在某些地方显示某些评论/文本类型）。

在 this.events 的 console.log 中，我得到：

0:
  item_id: 12,
  item_text_type: comment,
  item_text: "this has been updated",
  date: "2020/03/03"

1:
  item_id: 12,
  item_text_type: title,
  item_text: "new entry",
  date: "2020/03/03"

2:
  item_id: 13,
  item_text_type: comment,
  item_text: "this has been updated",
  date: "2020/03/03"

3:
  item_id: 13,
  item_text_type: title,
  item_text: "2nd Entry",
  date: "2020/03/03"

我想让它们变成更像这样的结构：

0:
  item_id: 12,
  date: "2020/03/03",
  comments:
    item_text_type: comment,
    item_text: "this has been updated"
    item_text_type: title,
    item_text: "new entry"

0:
  item_id: 13,
  date: "2020/03/03"
  comments:
    item_text_type: comment,
    item_text: "this has been updated"
    item_text_type: title,
    item_text: "2nd entry"

所以基本上，每个 item_id 只有一条记录，并将 cmets 组合成一个子数组或类似的东西。其他信息（例如日期）将在 id 级别。

我怎样才能改变这个来达到这个结果

fetchTasks() {
  axios.get('/home')
  .then(response => {
    //handle success

    this.events = response.data.map(({item_comment, ...item}) => ({
      ...item,
      title: item_comment
    }));

    console.log(this.events);

  })
  .catch(function(error) {
    // handle error
    console.log(error)
  })
  .finally(function() {

  })
},

Answer 1

更新

现在这包括与 item_id 和 cmets 相关值相关的任何其他数据然而只有遇到的任何冲突额外数据中的最后一个对于任何特定的 item 都会被保留。

您也不能有任何名为comments 的额外数据。如果是这样，它将被丢弃。

---

似乎是一个非常直接的数据转换。您需要将数组缩减为某种类型的 map（例如普通对象或 Map），由带有 type 和 的 item_id 属性键控em>text 属性添加为数组中的对象。

从那里，您可以通过将键和值分别映射到 item_id 和 comments 来将该 map 转换为所需的对象数组。

类似的东西

const res = [
  {item_id: 12, item_text_type: 'comment', item_text: "this has been updated", date: '2020/03/03' },
  {item_id: 12, item_text_type: 'title', item_text: "new entry", date: '2020/03/04' },
  {item_id: 13, item_text_type: 'comment', item_text: "this has been updated", date: '2020/03/05' },
  {item_id: 13, item_text_type: 'title', item_text: "2nd entry", date: '2020/03/06' }
]

const dataMap = res.reduce((map, { item_id, item_text_type, item_text, ...extra }) => {
  let { comments, ...item } = map.has(item_id) ? map.get(item_id) : { comments: [] }
  comments.push({ item_text_type, item_text })
  return map.set(item_id, { ...item, ...extra, comments })
}, new Map())
    
const transformed = Array.from(dataMap, ([ item_id, item ]) => ({
  item_id,
  ...item
}))

console.info(transformed)

.as-console-wrapper { max-height: none !important; height: 100%; }