[英]Array of objects - how to group items by property and squash data from each of grouped items into 1
我正在尝试对主题中描述的数组执行操作。 我已经完成的工作 - 按公共属性 + map 将每个项目的数据分组为所需的格式。 它是通过在其中使用 reduce + map function 来实现的。 现在我需要将每个分组项目属性压缩为 1 的最后一部分。我的目标是使其正常工作,理想情况下是通过扩展重组 function。
要重组的数组
const arrToRestructure = [
{
x: "test-x1",
y: "test-y1",
data: [
{id: 1, label: "label-y1-1"},
{id: 2, label: "label-y1-2"}
]
},
{
x: "test-x2",
y: "test-y1",
data: [
{id: 1, label: "label-y1-3"},
{id: 2, label: "label-y1-4"}
]
},
{
x: "test-x2",
y: "test-y2",
data: [
{id: 1, label: "label-y2-1"},
{id: 2, label: "label-y2-2"}
]
},
]
重组 function
const restructureArr = () => {
const restructuredArr = arrToRestructure.reduce(
(prevVal, nextVal) => ({
...prevVal,
[nextVal["y"]]: [
...(prevVal[nextVal["y"]] || []),
nextVal.data.map((nextVal) => nextVal.label),
]})
,[]);
return restructuredArr;
}
当前 output
{
"test-y1": [
[
"label-y1-1",
"label-y1-2"
],
[
"label-y1-3",
"label-y1-4"
]
],
"test-y2": [
[
"label-y2-1",
"label-y2-2"
]
]
}
所需 output
{
"test-y1": [
"label-y1-1",
"label-y1-2",
"label-y1-3",
"label-y1-4",
],
"test-y2": [
"label-y2-1",
"label-y2-2"
]
}
每次只需传播Array#map
结果:
const restructureArr = () => {
const restructuredArr = arrToRestructure.reduce((prevVal, nextVal) => ({
...prevVal,
[nextVal["y"]]: [
...(prevVal[nextVal["y"]] || []),
...nextVal.data.map((nextVal) => nextVal.label), // fix
]
}) , []);
return restructuredArr;
}
一些增强功能:
const restructureArr = (arrToRestructure = []) => arrToRestructure.reduce((acc, { y, data = [] }) => ({...acc, [y]: [...(acc[y] || []), ...data.map(({ label }) => label), ] }), []); const arrToRestructure = [ { x: "test-x1", y: "test-y1", data: [ {id: 1, label: "label-y1-1"}, {id: 2, label: "label-y1-2"} ] }, { x: "test-x2", y: "test-y1", data: [ {id: 1, label: "label-y1-3"}, {id: 2, label: "label-y1-4"} ] }, { x: "test-x2", y: "test-y2", data: [ {id: 1, label: "label-y2-1"}, {id: 2, label: "label-y2-2"} ] } ]; console.log(restructureArr(arrToRestructure));
您可以使用array#reduce
根据y
值进行分组。 使用array#forEach
推送所有 label 以获得相同的y
值。
const arrToRestructure = [ { x: "test-x1", y: "test-y1", data: [ {id: 1, label: "label-y1-1"}, {id: 2, label: "label-y1-2"} ] }, { x: "test-x2", y: "test-y1", data: [ {id: 1, label: "label-y1-3"}, {id: 2, label: "label-y1-4"} ] }, { x: "test-x2", y: "test-y2", data: [ {id: 1, label: "label-y2-1"}, {id: 2, label: "label-y2-2"} ] }, ], result = arrToRestructure.reduce((r, {y, data}) => { r[y]??= []; data.forEach(({label}) => r[y].push(label)); return r; },{}); console.log(result);
另一种解决方案是使用Object.entries
和.flat()
。
const obj = { "test-y1": [ [ "label-y1-1", "label-y1-2" ], [ "label-y1-3", "label-y1-4" ] ], "test-y2": [ [ "label-y2-1", "label-y2-2" ] ] } const e = Object.entries(obj).map(el => ({[el[0]]: el[1].flat()})) let o = Object.fromEntries(e.map(x => [Object.keys(x), Object.values(x)[0]])) console.log(o);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.