Create new array of objects with one different property from existing one

Question

I have an object array

const arr =
[
  { id: 1, name : "Joe", age:20, email: "[email protected]"},
  { id: 2, name : "Mike", age:50, email: "[email protected]"},
  { id: 3, name : "Joe", age:45, email: "[email protected]"}
]

How can I create a new array without modifying first one with only one property changed, like this (id is unique):

[
  { id: 1, name : "Joe", age:20, email: "[email protected]"},
  { id: 2, name : "Mike", age:50, email: "[email protected]"},
  { id: 3, name : "Harry", age:45, email: "[email protected]"}
]

Changed last element name property from "Joe" to "Harry"

Clone the array and modify it? Or clone the array and objects and modify it? — VLAZ
– VLAZ, Commented Sep 17, 2020 at 16:22
Of interest: What is the most efficient way to deep clone an object in Javascript — lurker
– lurker, Commented Sep 17, 2020 at 16:34

Nithish · Accepted Answer · 2020-09-17 17:50:47Z

1

Below I have created a sample snippet which clones the array of objects and modifies only the name of the object where id = 3.

const arr = [{id:1,name:"Joe",age:20,email:"[email protected]"},{id:2,name:"Mike",age:50,email:"[email protected]"},{id:3,name:"Joe",age:45,email:"[email protected]"}]

const cloneAndModify = (data) => {
  return data.map(d => ({
    ...d,
    ...(d.id === 3 && {
      name: "Harry"
    })
  }))
}

console.log("Original Array: ", arr);
console.log("Cloned Array: ", cloneAndModify(arr))

.as-console-wrapper {
  max-height: 100% !important;
}

You can replace d.id === 3 condition as per your actual requirement based on which you want to change the name.

answered Sep 17, 2020 at 17:50

Nithish

6,1273 gold badges13 silver badges25 bronze badges

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

Comments

Dharman · Accepted Answer · 2020-09-17 16:37:16Z

0

You would first need to clone the array either manually or using a library function like lodash._cloneDeep (https://www.npmjs.com/package/lodash.clonedeep).

If you want to do it manually, just loop over each property of the array elements and copy that into a new array.

After that you can change the cloned array however you like and it will not affect the original one.

edited Sep 17, 2020 at 16:37

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Sep 17, 2020 at 16:31

tyxeron

11 bronze badge

Collectives™ on Stack Overflow

Create new array of objects with one different property from existing one

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related