Destruct object of array in JavaScript-CodePudding

Hi Guys I have an array of objects, which I want to destruct. The following is an excerpt of the array.

[
  {
    "Area": "Werk Produktivität [%] - Target",
    "Jan": 86.21397507374327,
    "Feb": 86.0570021973368,
    "Mrz": 88.70898346258058,
    "Apr": 85.29801908413164,
    "May": 85.07431241640211
  },
  {
    "Area": "Werk Produktivität [%] - Actual",
    "Jan": 84.17054711398421,
    "Feb": 83.80826026601528,
    "Mrz": 84.11553769971036,
    "Apr": 83.76460916731,
    "May": 82.69773876702813
  }
]

What I now try to achieve is splitting the array into the following :

[
  {
    "Area": "Werk Produktivität [%] - Target",
    "Jan": 86.21397507374327,

  },
  {
    "Area": "Werk Produktivität [%] - Target",
    "Feb": 86.0570021973368,
   
  },
  {
    "Area": "Werk Produktivität [%] - Target",
    "Mrz": 88.70898346258058,

  },
  {
    "Area": "Werk Produktivität [%] - Target",
    "Apr": 85.29801908413164,

  },
  {
    "Area": "Werk Produktivität [%] - Target",
    "May": 85.07431241640211,
  },
  {
    "Area": "Werk Produktivität [%] - Actual",
    "Jan": 84.17054711398421,

  },
  {
    "Area": "Werk Produktivität [%] - Actual",
    "Feb": 83.80826026601528,
  },
  {
    "Area": "Werk Produktivität [%] - Actual",
    "Mrz": 84.11553769971036,

  },
    {
    "Area": "Werk Produktivität [%] - Actual",
    "Apr": 83.76460916731,
  },
   {
    "Area": "Werk Produktivität [%] - Actual",
    "May": 82.69773876702813
  }

I was thinking of using the ...rest parameter the following way but I only get the last 5 items of the array. Please note that obj is above excerpt of the object of array.

const fn = ({ Area, ...rest }) =>
  Object.values(rest)
    .map(Month => ({
      Area,
      Month
    }))
       


})
const result = fn(obj)

CodePudding user response：

you can use reduce and Object.entries for getting result same as :

const data = [
  {
    "Area": "Werk Produktivität [%] - Target",
    "Jan": 86.21397507374327,
    "Feb": 86.0570021973368,
    "Mrz": 88.70898346258058,
    "Apr": 85.29801908413164,
    "May": 85.07431241640211
  },
  {
    "Area": "Werk Produktivität [%] - Actual",
    "Jan": 84.17054711398421,
    "Feb": 83.80826026601528,
    "Mrz": 84.11553769971036,
    "Apr": 83.76460916731,
    "May": 82.69773876702813
  }
]
const result  = data.reduce((res, {Area, ...rest}) => {
  Object.entries(rest).forEach(([key, value]) => res.push({Area, [key]: value}))
  return res
}, [])
console.log(result)

CodePudding user response：

You can use the function Array.prototype.reduce and inside of it the function Array.prototype.map to build the desired object.

const arr = [  {    "Area": "Werk Produktivität [%] - Target",    "Jan": 86.21397507374327,    "Feb": 86.0570021973368,    "Mrz": 88.70898346258058,    "Apr": 85.29801908413164,    "May": 85.07431241640211  },  {    "Area": "Werk Produktivität [%] - Actual",    "Jan": 84.17054711398421,    "Feb": 83.80826026601528,    "Mrz": 84.11553769971036,    "Apr": 83.76460916731,    "May": 82.69773876702813  }];
const result = arr.reduce((a, {Area, ...months}) => {
  return [...a, ...Object.entries(months).map(([month, value]) => ({Area, [month]: value}))];
}, []);

console.log(result);

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

CodePudding user response：

Not sure what obj in result = fn(obj) does here. I think you are calling map on the array and getting the first item in the resulting 2D array. You just need to call flatMap on the array with fn as the callback.

const output = inputArray.flatMap(fn)

const output = inputArray.map(fn).flat()

Also the fn needs to be tweaked a bit. You need to get the entires of the rest object since you need the key of the object as well

Object.entries(rest)
      .map(([key, value]) => ({ Area, [key]: value }))

const input = [
  {
    "Area": "Werk Produktivität [%] - Target",
    "Jan": 86.21397507374327,
    "Feb": 86.0570021973368,
    "Mrz": 88.70898346258058,
    "Apr": 85.29801908413164,
    "May": 85.07431241640211
  },
  {
    "Area": "Werk Produktivität [%] - Actual",
    "Jan": 84.17054711398421,
    "Feb": 83.80826026601528,
    "Mrz": 84.11553769971036,
    "Apr": 83.76460916731,
    "May": 82.69773876702813
  }
]

const fn = ({ Area, ...rest }) =>
  Object.entries(rest)
    .map(([key,value]) => ({
      Area,
      [key]: value
    }))

const output = input.flatMap(fn)

console.log(output)

CodePudding user response：

const ary = [
  {
    "Area": "Werk Produktivität [%] - Target",
    "Jan": 86.21397507374327,
    "Feb": 86.0570021973368,
    "Mrz": 88.70898346258058,
    "Apr": 85.29801908413164,
    "May": 85.07431241640211
  },
  {
    "Area": "Werk Produktivität [%] - Actual",
    "Jan": 84.17054711398421,
    "Feb": 83.80826026601528,
    "Mrz": 84.11553769971036,
    "Apr": 83.76460916731,
    "May": 82.69773876702813
  }
];

const newAry = [];

for(item of ary){
  const {
    Area,
    ...months
  }=item;
  for([k,v] of Object.entries(months)){
    newAry.push({Area,[k]:v});
    
  }
}
console.log(newAry);

Hope this helps you!!!

CodePudding user response：

You can simply achieve that by using Destructuring assignment.

Demo :

const arr = [
  {
    "Area": "Werk Produktivität [%] - Target",
    "Jan": 86.21397507374327,
    "Feb": 86.0570021973368,
    "Mrz": 88.70898346258058,
    "Apr": 85.29801908413164,
    "May": 85.07431241640211
  },
  {
    "Area": "Werk Produktivität [%] - Actual",
    "Jan": 84.17054711398421,
    "Feb": 83.80826026601528,
    "Mrz": 84.11553769971036,
    "Apr": 83.76460916731,
    "May": 82.69773876702813
  }
];

const res = [];

arr.forEach(obj => {
    const {Area, ...remaining} = obj;
  Object.keys(remaining).forEach(month => {
    res.push({ Area, [month]: remaining[month] })
  })
})

console.log(res);