How to modify part of an object in array using map in Javascript

Question

I am trying to take an array of objects like so

[
   { url: 'some url here', clickHandler: 'click handler function'},
   { url: 'some other url here', clickHandler: 'other clickHandler function'}
]

I want to pull apart the url of the object and run each url through a function that returns the modified url and return an array like this

[
   { url: 'some modified url here', clickHandler: 'click handler function'},
   { url: 'some other modified url here', clickHandler: 'other clickHandler function'}
]

I know that I want to use .map because I can iterate over the array of objects but I am unsure how to create the new array to have the same structure but just modify the url as necessary. The function is just going to return the modified url.

UPDATE: I don’t want to use forEach because the original array needs to remain intact.

"I don’t want to use forEach because the original array needs to remain intact" it really depends on what you do in the callback. — Mark Schultheiss
– Mark Schultheiss, Commented Oct 6, 2017 at 21:10

Sebastian Kaczmarek · Accepted Answer · 2017-10-06 21:00:03Z

1

Easy trick would be:

var newArray = oldArray.map(function(el) {
    el.url = 'new url';   // change url

    return el;          // return whole modified element
});

answered Oct 6, 2017 at 21:00

Sebastian Kaczmarek

8,5254 gold badges25 silver badges44 bronze badges

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

Comments

Andy · Accepted Answer · 2017-10-06 21:04:55Z

0

Simply return map the array objects as they are except by calling the function that you want to change the url:

var output = input.map(obj => {
  return {
    url: changeUrl(obj.url),
    clickHandler: obj.clickHandler
  }
});

DEMO

edited Oct 6, 2017 at 21:04

answered Oct 6, 2017 at 21:03

Andy

63.6k13 gold badges72 silver badges99 bronze badges

1 Comment

Mcl0vin Over a year ago

I was thinking something like this but I wasn’t 100% sure if it was the right way to go. Thank you!

Dust_In_The_Wind · Accepted Answer · 2017-10-06 21:04:57Z

0

Use .map() to construct a new object on the fly and return it -

let arr = [

  {
    url: "http://www.foo.com",
    func: () => console.log("Hi")
  },
  {
    url: "http://www.bar.com",
    func: () => console.log("Hi")
  }
];


let modifiedArr = arr.map(e => ({
  url: e['url'] + '/baz',
  func: e['func']
}));

console.log(modifiedArr);

answered Oct 6, 2017 at 21:04

Dust_In_The_Wind

3,7229 gold badges51 silver badges87 bronze badges

Comments

llama · Accepted Answer · 2017-10-06 21:09:33Z

0

I would use .map() with Object.assign() so that you don't need to hard code all properties.

var data = [
   { url: 'some url here', clickHandler: 'click handler function'},
   { url: 'some other url here', clickHandler: 'other clickHandler function'}
];

var result = data.map(obj =>
  Object.assign({}, obj, {url: obj.url + " MODIFIED"})
);

console.log(result);

Now if the object structure changes, you don't need to update your code.

answered Oct 6, 2017 at 21:09

llama

2,53715 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to modify part of an object in array using map in Javascript

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related