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

Answer 1

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 2

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

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

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