Arithmetic operations on array of objects - JavaScript

Question

I have a JSON

const myJSON = [
    {
        name: 'compass',
        LocX: 35,
        LocY: 312
    },
    {
        name: 'another',
        LocX: 52,
        LocY: 32
    }
]

From the UI, if a user wants to add number 5 to one of the two properties, how should I handle this?

I am already doing

myJSON.map(x => x[userSelectedProperty] + 5)
// when user selected property is 'LocX', [40, 57]

but I want the full array with just the value updated.

[
    {
        name: 'compass',
        LocX: 40,
        LocY: 312
    },
    {
        name: 'another',
        LocX: 57,
        LocY: 32
    }
]

How do I do this?

Pranav C Balan · Accepted Answer · 2017-11-12 05:43:47Z

4

Simply iterate and update the object property using Array#forEcah method which is enough for this purpose.

const myJSON = [{
    name: 'compass',
    LocX: 35,
    LocY: 312
  },
  {
    name: 'another',
    LocX: 52,
    LocY: 32
  }
];

let userSelectedProperty = 'LocX';
myJSON.forEach(x => x[userSelectedProperty] += 5);

console.log(myJSON);

In case you want to create a new array then use Array#map method.

const myJSON = [{
    name: 'compass',
    LocX: 35,
    LocY: 312
  },
  {
    name: 'another',
    LocX: 52,
    LocY: 32
  }
];

let userSelectedProperty = 'LocX';
let res = myJSON.map(x => {
  // copy properties to a new object
  let y = Object.assign({}, x);
  y[userSelectedProperty] += 5;
  return y;
});

console.log(res);

answered Nov 12, 2017 at 5:43

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

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

Comments

Nisarg Shah · Accepted Answer · 2017-11-12 05:44:34Z

2

You could just use a .forEach loop on the array to update the property within it, rather than creating a new array.

const myJSON = [
    {
        name: 'compass',
        LocX: 35,
        LocY: 312
    },
    {
        name: 'another',
        LocX: 52,
        LocY: 32
    }
];
var userSelectedProperty = "LocX";
// Update the array.
myJSON.forEach(t => t[userSelectedProperty] += 5);

console.log(myJSON);

answered Nov 12, 2017 at 5:44

Nisarg Shah

14.6k6 gold badges38 silver badges58 bronze badges

2 Comments

Jaromanda X Over a year ago

this mutates myJSON - not saying that's wrong in any way, it's unclear from the question

Nisarg Shah Over a year ago

@JaromandaX Yup, I noticed the const there, and I was going to do something like you did in your answer. But since they didn't specify in question about this, using a forEach seems a better approach.

brk · Accepted Answer · 2017-11-12 05:44:47Z

1

No need of map.Use forEach and update the key value

const myJSON = [{
    name: 'compass',
    LocX: 35,
    LocY: 312
  },
  {
    name: 'another',
    LocX: 52,
    LocY: 32
  }
]

function addNum(key, val) {
  myJSON.forEach(function(item) {
    item[key] = item[key] + val;

  })
}
addNum('LocX', 5)
console.log(myJSON)

answered Nov 12, 2017 at 5:44

brk

50.3k10 gold badges59 silver badges85 bronze badges

1 Comment

Jaromanda X Over a year ago

this mutates myJSON - not saying that's wrong in any way, it's unclear from the question

Jaromanda X · Accepted Answer · 2017-11-12 05:48:25Z

1

Using Object.assign makes this simply

const myJSON = [
    {
        name: 'compass',
        LocX: 35,
        LocY: 312
    },
    {
        name: 'another',
        LocX: 52,
        LocY: 32
    }
]
let userSelectedProperty = 'LocX';
let newObject = myJSON.map(x => Object.assign({}, x, {[userSelectedProperty]: x[userSelectedProperty] + 5}));
console.log(newObject);

answered Nov 12, 2017 at 5:48

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

Comments

Mamun · Accepted Answer · 2017-11-12 06:13:51Z

1

Try the following:

const myJSON = [
    {
        name: 'compass',
        LocX: 35,
        LocY: 312
    },
    {
        name: 'another',
        LocX: 52,
        LocY: 32
    }
]
var userInput = 5;
var final = myJSON.map((x, i)=>{
	return  {name:x.name ,LocX:x.LocX+userInput, LocY:x.LocY};
});
console.log(final);

answered Nov 12, 2017 at 6:13

Mamun

69k9 gold badges51 silver badges62 bronze badges

Collectives™ on Stack Overflow

Arithmetic operations on array of objects - JavaScript

5 Answers 5

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related