Modify object values in an array of objects

Question

I have an array of objects that looks like this:

const arr1 = [
    {id: 1, name: 'Dave', tax: 123.34543}
    {id: 2, name: 'John', tax: 3243.12323}
    {id: 3, name: 'Tom', tax: 122.34324}
]

And I am trying to round off the tax value, so in the end the array should look like this:

[
   {id: 1, name: 'Dave', tax: 123.34}
   {id: 2, name: 'John', tax: 3243.12}
   {id: 3, name: 'Tom', tax: 122.34}
]

I tried using the map function like so:

arr1.map(value => Math.round(value.tax * 100)/100);

but instead of getting a modified array of objects, I get an array with only the result of the Math.round which looks like this: [ 123.34, 3243.12, 122.34]

How do I map the array of objects to get the expected result as described above.

Thanks.

do you want a new array with new objects or just the same with mutated props? — Nina Scholz
– Nina Scholz, Commented Nov 1, 2018 at 9:45

Paul Fitzgerald · Accepted Answer · 2018-11-01 09:49:10Z

3

You can update tax in your map function.

See implementation below.

const arr1 = [
    {id: 1, name: 'Dave', tax: '123.34543'},
    {id: 2, name: 'John', tax: '3243.12323'},
    {id: 3, name: 'Tom', tax: '122.34324'},
];

const taxRoundedArray = arr1.map(item => {
  let tax = Math.round(item.tax * 100)/100
  return {
    ...item,
    tax
  }
});

console.log(taxRoundedArray);

answered Nov 1, 2018 at 9:49

Paul Fitzgerald

12.1k4 gold badges45 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dave Kalu Over a year ago

This adds an extra tax property to each object.

Paul Fitzgerald Over a year ago

It shouldn't do. Look at the returned array. As it uses the spread operator it hasn't added another tax property. medium.com/front-end-hacking/…

Paul Fitzgerald Over a year ago

also, just so you are aware, the solution you accepted is more or less the same, but has used Object.assign instead of the spread operator, but they do the same thing.

Dave Kalu Over a year ago

Oh I see. I believe I made an error on my end when I was testing your solution. Thanks for the help nonetheless.

Nina Scholz · Accepted Answer · 2018-11-01 09:51:40Z

1

You could map new objects with the wanted values.

const
    array = [{ id: 1, name: 'Dave', tax: 123.34543 }, { id: 2, name: 'John', tax: 3243.12323 }, { id: 3, name: 'Tom', tax: 122.34324 }],
    result = array.map(o => Object.assign({}, o, { tax: Math.round(o.tax * 100) / 100 }));
    
console.log(result);

answered Nov 1, 2018 at 9:51

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

Lloyd · Accepted Answer · 2018-11-01 09:48:13Z

1

You are very close to the correct solution, see below:

arr1.map(value => {
  value.tax = Math.round(value.tax * 100)/100);
  return value
});

You need to return the altered object otherwise it gets overwritten.

Hope this helps

Lloyd

answered Nov 1, 2018 at 9:48

Lloyd

2561 silver badge8 bronze badges

2 Comments

Dave Kalu Over a year ago

Ahh I see. Stupid me. Thanks.

Nina Scholz Over a year ago

this approach alters the original object, becaus it assigns a new value to tax. please look to arr1.

Nikhil Aggarwal · Accepted Answer · 2018-11-01 09:51:28Z

1

Array.map processes the entry in array and return the processed value. In the attempt, you were only returning the updated tax, however, you will need to return the object. Try following

const arr1 = [{id: 1, name: 'Dave', tax: 123.34543},{id: 2, name: 'John', tax: 3243.12323},{id: 3, name: 'Tom', tax: 122.34324}];

const arr2 = arr1.map(({tax, ...rest}) => ({...rest, tax: Math.round(tax * 100)/100}));
console.log(arr2);

edited Nov 1, 2018 at 9:51

answered Nov 1, 2018 at 9:46

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Comments

Andy · Accepted Answer · 2018-11-01 10:01:47Z

0

map over the array and return each object with a new tax value that has been turned to a floating-point number fixed to two decimal places.

const arr1 = [{"id":1,"name":"Dave","tax":"123.34543"},{"id":2,"name":"John","tax":"3243.12323"},{"id":3,"name":"Tom","tax":"122.34324"}];

const arr2 = arr1.map(obj => {
  const tax = +Number.parseFloat(obj.tax).toFixed(2);
  return { ...obj, tax };
})

console.log(arr2);

edited Nov 1, 2018 at 10:01

answered Nov 1, 2018 at 9:56

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Comments

Yosvel Quintero · Accepted Answer · 2018-11-01 10:21:07Z

0

You can do:

const arr1 = [
  {id: 1, name: 'Dave', tax: '123.34543'},
  {id: 2, name: 'John', tax: '3243.12323'},
  {id: 3, name: 'Tom', tax: '122.34324'}
];

const result = arr1.map(user => {
  user.tax = (Math.round(+user.tax * 100) / 100);
  return user;
});

console.log(result);

edited Nov 1, 2018 at 10:21

answered Nov 1, 2018 at 9:52

Yosvel Quintero

19.1k5 gold badges39 silver badges47 bronze badges

2 Comments

Dave Kalu Over a year ago

I'm curious to know what the + is used for?

Yosvel Quintero Over a year ago

That is the Unary plus (+) operator to convert string into a number

Collectives™ on Stack Overflow

Modify object values in an array of objects

6 Answers 6

4 Comments

Comments

2 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related