尝试基于特定字段键展平嵌套对象答案

【问题标题】：Attempting to flatten nested objects based on a specific field key尝试基于特定字段键展平嵌套对象
【发布时间】：2021-10-14 13:38:57
【问题描述】：

我希望通过数组进行映射，获取指定字段的键/值，然后将其合并到主对象中。

目前我的数组看起来像：

const data = [
   {
      "id": "3QXNO4SDo08FgAfQy3z5",
      "title": "Team One",
      "scores": [
         {
            "id": "DbkZljn22YSGVBLxiT4o",
            "score": 88
         },
         {
            "id": "v7ss2ypT4qf9RIvIynJp"
            "score": 5,
         }
      ]
   },
   {
      "id": "EmoL3dlPWpOPPiLixIYJ",
      "title": "Team Two",
      "scores": [
         {
            "id": "DbkZljn22YSGVBLxiT4o",
            "score": 77,
         },
         {
            "id": "v7ss2ypT4qf9RIvIynJp",
            "score": 0,
         }
      ]
   }
]

我需要将其简化为：

[
   {
      "id": "3QXNO4SDo08FgAfQy3z5",
      "title": "Team One",
      "DbkZljn22YSGVBLxiT4o": 88,
      "v7ss2ypT4qf9RIvIynJp": 5,
   },
   {
      "id": "EmoL3dlPWpOPPiLixIYJ",
      "title": "Team Two",
      "DbkZljn22YSGVBLxiT4o": 77,
      "v7ss2ypT4qf9RIvIynJp": 0,
   }
]

获取分数的唯一 ID 并将其用作我的对象键。

我想这需要嵌套循环来获得结果。我会发布我的编码尝试，但它们存在严重缺陷和混乱。

【问题讨论】：

这是一个奇怪的物体。你确定这是你想做的吗？
答案能否使用添加到 2015 年之后引入的 ECMAScript 的功能？目前，您的标签另有说明（仅限于 ES6 和 ES5）。
Matt - 纯粹是为了显示和在动态表格中排序。

标签： javascript reactjs ecmascript-6 ecmascript-5

【解决方案1】：

您的问题不清楚.. 但这个答案可能会对你有所帮助

const data= [
   {
      "id": "3QXNO4SDo08FgAfQy3z5",
      "title": "Team One",
      "scores": [
         {
            "id": "DbkZljn22YSGVBLxiT4o",
            "score": 88
         },
         {
            "id": "v7ss2ypT4qf9RIvIynJp"
            "score": 5,
         }
      ]
   },
   {
      "id": "EmoL3dlPWpOPPiLixIYJ",
      "title": "Team Two",
      "scores": [
         {
            "id": "DbkZljn22YSGVBLxiT4o",
            "score": 77,
         },
         {
            "id": "v7ss2ypT4qf9RIvIynJp",
            "score": 0,
         }
      ]
   }
]

通过点击数据字段：

const array = [];

function handleSelect(id) {

const copyData = [...data];
const foundItems =  copyData.map(item => item.id === id);

array.push(foundItems)

}

最后的数组是：

const array = [
   {
      "id": "3QXNO4SDo08FgAfQy3z5",
      "title": "Team One",
      "DbkZljn22YSGVBLxiT4o": 88,
      "v7ss2ypT4qf9RIvIynJp": 5,
   },
   {
      "id": "EmoL3dlPWpOPPiLixIYJ",
      "title": "Team Two",
      "DbkZljn22YSGVBLxiT4o": 77,
      "v7ss2ypT4qf9RIvIynJp": 0,
   }
]

【讨论】：

谢谢。我不确定应该在哪里调用 handleSelect 函数。我正在寻找一种可以立即重组整个数组的解决方案。

【解决方案2】：

const flattenedArray = data.map((dt) => {
  let ar = [];
  dt.scores.forEach((n, i) => (ar = { ...ar, [n.id]: n.score }));
  return { ...dt, ...ar };
});

返回所需的展平数组。

【讨论】：

【解决方案3】：

您可以结合Array#map 和Array#reduce 来实现所需的输出。

const mapped = data.map(({ scores, ...rest }) => ({
  ...rest,
  ...scores.reduce((output, score) => ({ ...output, [score.id]: score.score }), {})
}));

【讨论】：