Create new Array of Object from Array of Object

Question

Hello guys I want to ask something about create new array of object from array of object. I need to modify the data because I need to create a grouping bar chart in react-native with victory library. They current data is need to be adjusted to create the chart

the data look like this

[
 {
 "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
 }
 ]
 }
]

how can I create data like this ? (data that victory accept)

[
 {
 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'
 
 }
]

• cyberbrain: Found this article about a library for doing such transformations: medium.com/agileactors/… (The library is @perpk/json-xform )

Answer 1

You could rename and transpose the items.

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; }

• Alek Pacul: Thank you Nina, this is what I really need. Really appreciate this answer.
• Alek Pacul: But can I ask what is '??=' symbols mean?
• Nina Scholz: it is the logical nullish assignment ??=.

Answer 2

maybe there is a solution with better optimization, but this works and the code is easy to understand :)

const yourArray = [{"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 res = [];
for (const month of yourArray) {
 for (const phase of month.phase) {
 res.push({
 x: month.date,
 y: phase.days,
 type: phase.phaseName
 });
 }
};
console.log(res);

Answer 3

You can use javascript functional operators like map and reduce like so

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;
 }, [])
 .reduce(
 (array, month) => {
 month.forEach((item, i) => {
 if (!array[i]) array[i] = [];
 array[i].push(item);
 });
 return array;
 },
 [[]]
 );
console.log(result);

• Alek Pacul: Hello Haris, thank you for replying but this is not what I wanted, I wanted to be like this [{x:'April', y: 7, type: 'initiation'},{ x: 'Mei', y: 44, type: 'justification' }, { x: 'Juni', y: 6, type: 'signing' }]. in 1 array I want have 1 unique object based on the month so If there are 1 object with x: "April 2022" the next object with x: "April 2022" should be in another array and so on
• Haris Bouchlis: @AlekPacul I updated the answer to include this, check it out

Answer 4

Please use this below code

const convertedArray = (arr) => {
 let resultantArray = [];
 arr.forEach((item) => {
 const { date } = item;
 const { phase } = item;
 phase.forEach((phaseItem, index) => {
 const { phaseName } = phaseItem;
 const { days } = phaseItem;
 const phaseObject = {
 x: date,
 y: days,
 type: phaseName,
 };
 if (resultantArray.length === 0) {
 resultantArray = [[{ ...phaseObject }]];
 } else {
 if (resultantArray[index]) {
 resultantArray[index] = [...resultantArray[index], phaseObject];
 } else {
 resultantArray[index] = [{ ...phaseObject }];
 }
 }
 });
 });
 return resultantArray;
};
console.log(convertedArray(arr));