How to remove object property from an array of objects if the value is 0

I have an array like this:

const data = [
  { percent: 123, unit: -1 },
  { percent: 456, unit: 0 },
  { percent: 0, unit: 5},
  { percent: 789, unit: -3 }
];

and I’m trying to remove all properties that have 0 value, so the desired result will be like this:

var data = [
  { percent: 123, unit: -1 },
  { percent: 456 },
  { unit: 5},
  { percent: 789, unit: -3 }
];

I’ve tried something like this:

const newData = 
   data.map(e => 
      Object.keys(e).forEach(key => 
         e[key] === 0 && delete e[key]));

but that returns an array of undefined values.

const data = [
    { percent: 123, unit: -1 },
    { percent: 456, unit: 0 },
    { percent: 0, unit: 5},
    { percent: 789, unit: -3 }
];

const newData = data.map(e => Object.keys(e).forEach(key => e[key] === 0 && delete e[key]))

console.log(newData)

What am I doing wrong? Thanks in advance!

Answer

Array#forEach doesn’t return an array.

To achieve your desired output, in each iteration, use Object#entries to get the key-value pairs of the current object, and Array#filter to filter the ones where the value is zero. To construct the resulting object again, use Object#fromEntries:

const data = [ { percent: 123, unit: -1 }, { percent: 456, unit: 0 }, { percent: 0, unit: 5}, { percent: 789, unit: -3 } ];

const newData = data.map(e => 
  Object.fromEntries(
    Object.entries(e).filter(([key, value]) => value !== 0)
  )
);

console.log(newData)