How to create a combination of array is react js?

Question

I need to create a combination of arrays.

I have the data like this and I need to arrange the data for the chart series

[
   {
      "movingDuration":10,
      "parkedDuration":15,
   },
   {
      "movingDuration":15,
      "parkedDuration":23,
   },
   {
      "movingDuration":43,
      "parkedDuration":26,
   },
   {
      "movingDuration":67,
      "parkedDuration":21,
   },
   {
      "movingDuration":47,
      "parkedDuration":54,
   }
]

and I expected a result like this the following method

[
   {
      "name":"Moving Duration",
      "data":[
         10,
         15,
         43,
         67,
         47
      ]
   },
   {
      "name":"Parked Duration",
      "data":[
         15,
         23,
         26,
         21,
         54
      ]
   }
]

Any help would be appreciated. thank you

Drew Reese · Accepted Answer · 2020-12-17 06:59:40Z

Run the data through an array reduce to group by property key, then map it to the resultant object format you want.

const formattedData = data.reduce((data, current) => {
  Object.entries(current).forEach(([key, value]) => {
    data[key] = [...(data[key] ?? []), value];
  });
  return data;
}, {});

const finalData = Object.entries(formattedData).map(([name, data]) => ({
  name,
  data
}));

const data = [
  {
    movingDuration: 10,
    parkedDuration: 15
  },
  {
    movingDuration: 15,
    parkedDuration: 23
  },
  {
    movingDuration: 43,
    parkedDuration: 26
  },
  {
    movingDuration: 67,
    parkedDuration: 21
  },
  {
    movingDuration: 47,
    parkedDuration: 54
  }
];

const formattedData = data.reduce((data, current) => {
  Object.entries(current).forEach(([key, value]) => {
    data[key] = [...(data[key] ?? []), value];
  });
  return data;
}, {});

const finalData = Object.entries(formattedData).map(([name, data]) => ({
  name,
  data
}));

console.log(finalData);

srujana bhamidipalli · Accepted Answer · 2020-12-17 06:58:40Z

0

Does this help?

const arr = [
    {
      movingDuration: 10,
      parkedDuration: 15
    },
    {
      movingDuration: 15,
      parkedDuration: 23
    },
    {
      movingDuration: 43,
      parkedDuration: 26
    },
    {
      movingDuration: 67,
      parkedDuration: 21
    },
    {
      movingDuration: 47,
      parkedDuration: 54
    }
  ];

  const resultArray = [{ name: 'Moving Duration', data: [] }, { name: 'Parked Duration', data: [] }];

  arr.forEach((ele) => {
    resultArray[0].data.push(ele.movingDuration);
    resultArray[1].data.push(ele.parkedDuration);
  });

answered Dec 17, 2020 at 6:58

srujana bhamidipalli

685 bronze badges

Comments

Nilesh Patel · Accepted Answer · 2020-12-17 07:00:30Z

0

Let me know if this helps.

const origData=[
   {
      "movingDuration":10,
      "parkedDuration":15,
   },
   {
      "movingDuration":15,
      "parkedDuration":23,
   },
   {
      "movingDuration":43,
      "parkedDuration":26,
   },
   {
      "movingDuration":67,
      "parkedDuration":21,
   },
   {
      "movingDuration":47,
      "parkedDuration":54,
   }
]

const cols=Object.keys(origData[0])
const result=cols.map(item=>{
const data=origData.map(i=>i[item])
  return {name:item,data}
})
console.log(result)

.as-console-wrapper { max-height: 100% !important; top: 0; }

answered Dec 17, 2020 at 7:00

Nilesh Patel

3,3079 silver badges13 bronze badges

Comments

Ketan Ramteke · Accepted Answer · 2020-12-17 07:06:13Z

0

let data = [
   {
  "movingDuration":10,
  "parkedDuration":15,
   },
   {
  "movingDuration":15,
  "parkedDuration":23,
   },
   {
  "movingDuration":43,
  "parkedDuration":26,
   },
   {
  "movingDuration":67,
  "parkedDuration":21,
   },
   {
  "movingDuration":47,
  "parkedDuration":54,
   }
]

let sol = {}

data.forEach(d => {
  let keys = Object.keys(d);
  if(sol[keys[0]]){
sol[keys[0]] = [...sol[keys[0]], d[keys[0]]]
sol[keys[1]] = [...sol[keys[1]], d[keys[1]]]
  }else{
sol[keys[0]] = [].concat(d[keys[0]])
sol[keys[1]] = [].concat(d[keys[1]])
  }
})

let final = Object.keys(sol).map(key =>{
  let temp = {}
  temp["name"] = key
  temp["data"] = sol[key]
  return temp
})

console.log(final)

answered Dec 17, 2020 at 7:06

Ketan Ramteke

10.7k2 gold badges27 silver badges46 bronze badges

Comments

StepUp · Accepted Answer · 2020-12-17 07:51:21Z

We can use reduce() method to create an object with Object.values() to get values from object:

const result = data.reduce((a, c) => {
    for (const key in c) {
        a[key] = a[key] || {name: key, data: []};
        a[key].data.push(c[key]);
     }
    return a;
}, {})

console.log(Object.values(result));

An example:

let data = [
    {
       "movingDuration":10,
       "parkedDuration":15,
    },
    {
       "movingDuration":15,
       "parkedDuration":23,
    },
    {
       "movingDuration":43,
       "parkedDuration":26,
    },
    {
       "movingDuration":67,
       "parkedDuration":21,
    },
    {
       "movingDuration":47,
       "parkedDuration":54,
    }
 ]


const result = data.reduce((a, c) => {
    for (const key in c) {
        a[key] = a[key] || {name: key, data: []};
        a[key].data.push(c[key]);
     }
    return a;
}, {})

console.log(Object.values(result));

Collectives™ on Stack Overflow

How to create a combination of array is react js?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related