大家好，我想問一些關于從物件陣列創建新物件陣列的問題。我需要修改資料，因為我需要在 react-native 中使用勝利庫創建分組條形圖。他們當前的資料需要調整以創建圖表
資料看起來像這樣
[
{
"date": "April 2022",
"phase": [
{
"phaseName": "initiation",
"days": 7
},
{
"phaseName": "justification",
"days": 6
},
{
"phaseName": "planning",
"days": 4
}
]
},
{
"date": "Mei 2022",
"phase": [
{
"phaseName": "justification",
"days": 44
},
{
"phaseName": "partner-selection",
"days": 32
},
{
"phaseName": "planning",
"days": 40
},
{
"phaseName": "initiation",
"days": 25
},
{
"phaseName": "signing",
"days": 5
}
]
},
{
"date": "Juni 2022",
"phase": [
{
"phaseName": "signing",
"days": 6
},
{
"phaseName": "planning",
"days": 54
},
{
"phaseName": "justification",
"days": 36
},
{
"phaseName": "initiation",
"days": 28
},
{
"phaseName": "partner-selection",
"days": 30
}
]
}
]
我怎樣才能創建這樣的資料？（勝利接受的資料）
[
{
x:'April 2022',
y: 7,
type: 'initiation'
},
{
x: 'Mei 2022',
y: 44,
type: 'justification'
},
{
x: 'Juni 2022',
y: 6,
type: 'signing'
}
],
[
{
x: 'April 2022',
y: 6,
type: 'justification'
},
{
x: 'Mei 2022',
y: 32,
type: 'partner-selection'
},
{
x: 'Juni 2022',
y: 54,
type: 'planning'
}
],
[
{
x: 'April 2022',
y: 4,
type: 'planning'
},
{
x: 'Mei 2022',
y: 40,
type: 'planning'
},
{
x: 'Juni 2022',
y: 36,
type: 'justification'
}
],
[
{
x: 'Mei 2022',
y: 25,
type: 'initiation'
},
{
x: 'Juni 2022',
y: 28,
type: 'initiation'
}
],
[
{
x: 'Mei 2022',
y: 5,
type: 'signing'
},
{
x: 'Juni',
y: 30,
type: 'partner-selection'
}
]
uj5u.com熱心網友回復：
您可以像這樣map使用javascript函式運算子reduce
const data = [
{
date: 'April 2022',
phase: [
{
phaseName: 'initiation',
days: 7,
},
{
phaseName: 'justification',
days: 6,
},
{
phaseName: 'planning',
days: 4,
},
],
},
{
date: 'Mei 2022',
phase: [
{
phaseName: 'justification',
days: 44,
},
{
phaseName: 'partner-selection',
days: 32,
},
{
phaseName: 'planning',
days: 40,
},
{
phaseName: 'initiation',
days: 25,
},
{
phaseName: 'signing',
days: 5,
},
],
},
{
date: 'Juni 2022',
phase: [
{
phaseName: 'signing',
days: 6,
},
{
phaseName: 'planning',
days: 54,
},
{
phaseName: 'justification',
days: 36,
},
{
phaseName: 'initiation',
days: 28,
},
{
phaseName: 'partner-selection',
days: 30,
},
],
},
];
const result = data.reduce((array, item) => {
array.push(
item.phase.map((p) => {
return { x: item.date, y: p.days, type: p.phaseName };
})
);
return array;
}, []);
console.log(result);編輯：此代碼不會創建您請求的三個陣列，因為我不了解它的條件。如果您可以詳細說明如何決定哪個物件進入哪個陣列，我將更新
uj5u.com熱心網友回復：
也許有更好優化的解決方案，但這有效:)
const res = [];
for (const month of array1) {
for (const phase of month.phase) {
res.push({
x: month.date,
y: phase.days,
type: phase.phaseName
});
}
}
uj5u.com熱心網友回復：
您可以重命名和轉置專案。
const
data = [{ date: "April 2022", phase: [{ phaseName: "initiation", days: 7 }, { phaseName: "justification", days: 6 }, { phaseName: "planning", days: 4 }] }, { date: "Mei 2022", phase: [{ phaseName: "justification", days: 44 }, { phaseName: "partner-selection", days: 32 }, { phaseName: "planning", days: 40 }, { phaseName: "initiation", days: 25 }, { phaseName: "signing", days: 5 }] }, { date: "Juni 2022", phase: [{ phaseName: "signing", days: 6 }, { phaseName: "planning", days: 54 }, { phaseName: "justification", days: 36 }, { phaseName: "initiation", days: 28 }, { phaseName: "partner-selection", days: 30 }] }],
result = data.reduce((r, { date: x, phase }) => {
phase.forEach(({ phaseName: type, days: y }, i) => {
r[i] ??= [];
r[i].push({ x, y, type });
});
return r;
}, []);
console.log(result);.as-console-wrapper { max-height: 100% !important; top: 0; }轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/493199.html
標籤：javascript 数组