Amend an object in an array-CodePudding

I need to amend the amount to add £ before the number and change it to two decimals i.e. £9.00

const data = [
  {
    title: 'Todo',
    amount: 9.99,
  },
  {
    title: 'In-Progress',
    amount: 4,
  },
  {
    title: 'Completed',
    amount: 10,
  },
  {
    title: 'Short',
    amount: 15.48,
  },
];

I can't work out how?

CodePudding user response：

You can use .map() and .toFixed(2) to achieve this:

const updatedData = data.map(item => {
  return {
    title: item.title,
    amount: '£'   item.amount.toFixed(2),
  };
});

item.amount.toFixed(2) will return the amount as a string with two decimal places. The '£' part will add the pound sign before the amount.

Shorter Way :

const updatedData = data.map(({title, amount}) => ({
      title,
      amount: `£${amount.toFixed(2)}`
 }));

If each object in the data array has several properties, use the spread operator like this :

const updatedData = data.map(({amount, ...rest}) => ({
  amount: `£${amount.toFixed(2)}`,
  ...rest
}));

CodePudding user response：

You could do that, or you could use the Intl.NumberFormat to change it to currency on-the-fly. That way you get to keep your data neutral, and let the browser/JS handle the transformation only when it's needed.

const data=[{title:"Todo",amount:9.99},{title:"In-Progress",amount:4},{title:"Completed",amount:10},{title:"Short",amount:15.48}];

const style = { style: 'currency', currency: 'GBP' };

for (const obj of data) {
  const currency = new Intl.NumberFormat('en-GB', style).format(obj.amount);
  console.log(currency);
}

If you still want to change the data this method is still preferable. map over the data, destructure the amount from the object, and return a new object with the transformed amount.

const data=[{title:"Todo",amount:9.99},{title:"In-Progress",amount:4},{title:"Completed",amount:10},{title:"Short",amount:15.48}];

const style = { style: 'currency', currency: 'GBP' };

function toGBP(amount) {
  return new Intl.NumberFormat('en-GB', style).format(amount);
}

const out = data.map(obj => {
  const { amount, ...rest } = obj;
  return { ...rest, amount: toGBP(amount) };
});

console.log(out);

Additional documentation

CodePudding user response：

Just map through it and use .toFixed(2) for the decimal.

const data = [
  {
    title: 'Todo',
    amount: 9.99,
  },
  {
    title: 'In-Progress',
    amount: 4,
  },
  {
    title: 'Completed',
    amount: 10,
  },
  {
    title: 'Short',
    amount: 15.48,
  },
];

const mapped = data.map((n) => { return {title: n.title, amount: `£${n.amount.toFixed(2)}`}});

console.log(mapped);

CodePudding user response：

You can use Number#toFixed(2) and Array#map() methods as follows:

const 
      data = [ { title: 'Todo', amount: 9.99, }, { title: 'In-Progress', amount: 4, }, { title: 'Completed', amount: 10, }, { title: 'Short', amount: 15.48 } ],
      
      out = data.map(({title,amount}) => ({title,amount:`£${amount.toFixed(2)}`}));
      
console.log( out );