How does one map an array in order to create both a new array with changed array items but without mutating the original array or any of its items?

Question

I have an array of objects for example I want to replace the key normal with value www.test.com/is/images/383773?@HT_dtImage. I am using .replace with regex to basically replace the wid and hei with @HT_dtImage

const urls = [
{"normal": "www.test.com/is/images/383773?wid=200&hei=200", 
"thumbnail": "www.test.com/is/images/383773?wid=200&hei=200"},
{"normal": "www.test.com/is/images/383773?wid=200&hei=200",
 "thumbnail": "www.test.com/is/images/383773?wid=200&hei=200"},
{"normal": "www.test.com/is/images/383773?wid=200&hei=200",
 "thumbnail": "www.test.com/is/images/383773?wid=200&hei=200"}
]

I tried using a .map like this which just returns the original object.

const updateImages = images => {
  images.map(image => {
    return image.normal.replace(/\b(?:wid|hei)=[^&]*&?/g, "") + "@HT_dtImage"
  });
  return images;
};

I also tried this but it returns it in an array without not as an array with objects. I feel like I'm just missing something simple.

const updateImages = images => {
   return images.map(image => {
     return image.normal.replace(/\b(?:wid|hei)=[^&]*&?/g, "") + "@HT_dtImage"
  })
};

The expected output I am looking for is

const urls = [
{"normal": "www.test.com/is/images/383773?@HT_dtImage", 
"thumbnail": "www.test.com/is/images/383773?wid=200&hei=200"},
{"normal": "www.test.com/is/images/383773?@HT_dtImage",
 "thumbnail": "www.test.com/is/images/383773?wid=200&hei=200"},
{"normal": "www.test.com/is/images/383773?@HT_dtImage",
 "thumbnail": "www.test.com/is/images/383773?wid=200&hei=200"}
]

You are asking how to replace the value with "333" but in your code you are using a regular expression that does something completely different. What are you intending to do? — Wais Kamal
– Wais Kamal, Commented Jan 17, 2022 at 19:24
Haven't had my coffee yet. I updated the post it should make sense now — steven5210
– steven5210, Commented Jan 17, 2022 at 19:39
Are you trying to update the objects in the array, or return a new array with the @HT_dtImages in it, while leaving the original one unchanged? — Tyler
– Tyler, Commented Jan 17, 2022 at 19:43
@Tyler I am trying to return a new array with the @HT_dtImage in it while leaving the original input images unchanged. — steven5210
– steven5210, Commented Jan 17, 2022 at 20:06
In case the OP intentionally wants to mutate every of the original array's url item, then map was not the right method but forEach was. — Peter Seliger
– Peter Seliger, Commented Jan 17, 2022 at 20:35

Peter Seliger · Accepted Answer · 2022-01-17 21:09:01Z

The OP not only needs to map the original array but also has to create and return a shallow [1] (and accordingly changed) copy of each array item.

[1] which for the OP's use case is sufficient enough due to not having to deal with deeper nested object/data structures.

Thus one could ...

either utilize Object.assign
or one makes use of spread syntax ...

const getNewListOfUpdatedUrlItems = itemList => {
  return itemList.map(item => {
    return {
      // create shallow `item` copy.
      ...item,
      // change `item` copy's `normal` property accordingly.
      normal: item.normal.replace(/\b(?:wid|hei)=[^&]*&?/g, "@HT_dtImage"),
    };
  });
};

const urlItemList = [{
  "normal": "www.test.com/is/images/383773?wid=200&hei=200",
  "thumbnail": "www.test.com/is/images/383773?wid=200&hei=200",
}, {
  "normal": "www.test.com/is/images/383773?wid=200&hei=200",
  "thumbnail": "www.test.com/is/images/383773?wid=200&hei=200",
}, {
  "normal": "www.test.com/is/images/383773?wid=200&hei=200",
  "thumbnail": "www.test.com/is/images/383773?wid=200&hei=200",
}];
const newUrlItemList = getNewListOfUpdatedUrlItems(urlItemList);

console.log({ newUrlItemList, urlItemList });

.as-console-wrapper { min-height: 100%!important; top: 0; }

In case the OP intentionally wants to mutate every of the original array's url item, then map was not the right method but forEach was ...

function changeUrlNormal(urlItem) {
  urlItem.normal =
    urlItem.normal.replace(/\b(?:wid|hei)=[^&]*&?/g, "@HT_dtImage");
}

const urlItemList = [{
  "normal": "www.test.com/is/images/383773?wid=200&hei=200",
  "thumbnail": "www.test.com/is/images/383773?wid=200&hei=200",
}, {
  "normal": "www.test.com/is/images/383773?wid=200&hei=200",
  "thumbnail": "www.test.com/is/images/383773?wid=200&hei=200",
}, {
  "normal": "www.test.com/is/images/383773?wid=200&hei=200",
  "thumbnail": "www.test.com/is/images/383773?wid=200&hei=200",
}];

urlItemList.forEach(changeUrlNormal);

console.log({ urlItemList });

.as-console-wrapper { min-height: 100%!important; top: 0; }

dbuchet · Accepted Answer · 2022-01-17 19:34:46Z

0

On your first try, images.map returns a new array which you don't assign to anything. You are returning the same array as the one passed as parameter.

const newImages = images.map(....);
return newImages

answered Jan 17, 2022 at 19:34

dbuchet

1,6511 gold badge7 silver badges7 bronze badges

2 Comments

Peter Seliger Over a year ago

The explanation is partially correct. But a valid solution is missing. (btw ... I didn't downvote)

dbuchet Over a year ago

Yes my answer was to "I tried using a .map like this which just returns the original object." which is normal with his code. Don't know why the downvote anyway :p

nermineslimane · Accepted Answer · 2022-01-17 19:53:50Z

0

  let mapped_urls = urls.map((url) => {
    url.normal.replace(/\b(?:wid|hei)=[^&]*&?/g, '') + '@HT_dtImage';
    return url;
  });

  console.log('URLs', mapped_urls);

 const urls = [
    {
      normal: 'www.test.com/is/images/383773?wid=200&hei=200',
      thumbnail: 'www.test.com/is/images/383773?wid=200&hei=200',
    },
    {
      normal: 'www.test.com/is/images/383773?wid=200&hei=200',
      thumbnail: 'www.test.com/is/images/383773?wid=200&hei=200',
    },
    {
      normal: 'www.test.com/is/images/383773?wid=200&hei=200',
      thumbnail: 'www.test.com/is/images/383773?wid=200&hei=200',
    },
  ];

  let mapped_urls = urls.map((url) => {
    url.normal =
      url.normal.replace(/\b(?:wid|hei)=[^&]*&?/g, '') + '@HT_dtImage';
    return url;
  });

  console.log('URLs', mapped_urls);

Here's your output :

edited Jan 17, 2022 at 19:53

answered Jan 17, 2022 at 19:47

nermineslimane

6365 silver badges21 bronze badges

1 Comment

Peter Seliger Over a year ago

The above code does not only create a new array of changed url items but it does mutate the original array's url items as well.

Emanuele Scarabattoli · Accepted Answer · 2022-01-17 20:41:52Z

0

You neen to return an array with some object that have the needed key, so something like:

const updateImages = images => images.map(image => (
  {
     ...image,
     normal: image.normal.replace(/\b(?:wid|hei)=[^&]*&?/g, "") + "@HT_dtImage",
  }
);

answered Jan 17, 2022 at 20:41

Emanuele Scarabattoli

4,4601 gold badge14 silver badges26 bronze badges

Collectives™ on Stack Overflow

How does one map an array in order to create both a new array with changed array items but without mutating the original array or any of its items?

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related