我正試圖把一個物件放在一起,其中涵蓋了一些這樣的資訊。
const tests = [
{
id: 1,
name: 'taro'。
designId: 1,
designName: 'design1'。
},
{
id: 1,
name: 'taro'。
designId: 2,
designName: 'design2'。
},
{
id: 2,
name: 'Bob'。
designId: 3,
designName: 'design3'。
},
{
id: 2,
name: 'Bob'。
designId: 4,
designName: 'design4'。
},
];
我想設定以下預期。
result = [
{
id: 1,
name: 'taro'。
designs: [
{ designId: 1, designName: 'design1' },
{ designId: 2, designName: 'design2' }
]
},
{
id: 2,
name: 'Bob'。
designs: [
{ designId: 3, designName: 'design3' },
{ designId: 4, designName: 'design4' }
]
}
我曾嘗試使用lodash groupby作為我的嘗試,但我很掙扎,因為我無法擺脫多余的屬性。
const result = _.chain(test)
.groupBy('id')
.map((value, key) => ({ id: key, designs: value })
.value()。
uj5u.com熱心網友回復:
使用reduce和findIndex:
const tests = [
{
id: 1,
name: 'taro'。
designId: 1,
designName: 'design1'。
},
{
id: 1,
name: 'taro'。
designId: 2,
designName: 'design2'。
},
{
id: 2,
name: 'Bob'。
designId: 3,
designName: 'design3'。
},
{
id: 2,
name: 'Bob'。
designId: 4,
designName: 'design4'。
}
]
const arr = tests.reduce((acc, curr) => {
const findIdx = acc.findIndex(x => x. name === curr.name)
const design = { designId: curr.designId, designName: curr.designName }
if (findIdx === -1) {
acc.push({ id: curr. id, name: curr.name, designs: [設計] })
} else {
acc[findIdx].designs.push(design)
}
return acc
}, [])
console.log(arr)
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
uj5u.com熱心網友回復:
你可以使用Array.prototype.reduce()結合Object.values():
。const tests = [{id: 1,name: 'taro',designId: 1,designName: 'design1',},{id: 1,name: 'taro',designId: 2,designName: 'design2',},{id: 2,name: 'Bob',designId: 3,designName: 'design3',},{id: 2,name: 'Bob',designId: 4,designName: 'design4'}]
const result = Object.values(test. reduce((a, { id, name, ...rest }) => {
a[id] = a[id] || { id, name, designs: [] }
a[id].designs.push({ ...rest })
return a
}, {}))
console.log(result)
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
uj5u.com熱心網友回復:
您可以使用地圖
輕松實作高效的結果。 。const tests = [
{
id: 1,
name: "taro"。
designId: 1,
designName: "design1"。
},
{
id: 1,
name: "taro"。
designId: 2,
designName: "design2"。
},
{
id: 2,
name: "Bob"。
designId: 3,
designName: "design3"。
},
{
id: 2,
name: "Bob"。
designId: 4,
designName: "design4"。
},
];
const map = new Map();
tests.forEach(({ id, name, ...rest }) =>/span>
map.has(id)
? map.get(id).designs.push(rest)。
: map.set(id, { id, name, designs: [rest] })
);
const result = [...map.values()]。
console.log(result);
/* This is not a part of answer. 它只是為了給輸出填充高度。所以請忽略它 */
.as-console-wrapper { max-height: 100% ! important; top: 0; }
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/332970.html
標籤:
上一篇:覆寫發布請求
