Update Array containing objects using spread operator

Question

I have an array containing objects in javascript / typescript.

let array = [{id:1,name:'One'}, {id:2, name:'Two'}, {id:3, name: 'Three'}]

How can I update name of the second element (with id 2) and copy the array to a new array using javascript spread (...) operator?

Answer 1

You can use a mix of .map and the ... spread operator

You can set the value after you've created your new array

 let array = [{id:1,name:'One'}, {id:2, name:'Two'}, {id:3, name: 'Three'}]; let array2 = array.map(a => {return {...a}}) array2.find(a => a.id == 2).name = "Not Two"; console.log(array); console.log(array2);

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

Or you can do it in the .map

 let array = [{id:1,name:'One'}, {id:2, name:'Two'}, {id:3, name: 'Three'}]; let array2 = array.map(a => { var returnValue = {...a}; if (a.id == 2) { returnValue.name = "Not Two"; } return returnValue }) console.log(array); console.log(array2);

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

Answer 2

There are a few ways to do this. I would suggest using Array.map :

let new_array = array.map(element => element.id == 2 ? {...element, name : 'New Name'} : element);

or with Object.assign :

let new_array = array.map(element => element.id == 2 ? Object.assign({}, element, {name : 'New Name'}) : element);

Map returns a new array, so you shouldn't need the array spread operator.

Answer 3

We can use

let array = [{id:1,name:'One'}, {id:2, name:'Two'}, {id:3, name: 'Three'}];
let array2 = [...array]
array2.find(a => a.id == 2).name = "Not Two";
console.log(array2);

Answer 4

You can simply use map() and change the element there. here is the code---

array_copy = array.map((element) => {
  console.log(element.id);
  if (element.id === 2) {
    element.name = "name changed";
  } 
return element;
});

console.log(array_copy);

Here the main array also gets modified, as elements inside the array are objects and it references to the same location even in the new array.

Answer 5

You can do it like this in map , no need for spread :

const array = [{id:1,name:'One'}, {id:2, name:'Two'}, {id:3, name: 'Three'}]

const updatedArray = array.map(a => {
   if (a.id == 2) {
      a.name = 'New Name';
   }
   return a;
});

Answer 6

Merging properties from filterQueryParams to selectedLaws (existing solutions did not suit me):

if (this.filterQueryParams && Object.prototype.toString.call(this.filterQueryParams) === '[object Array]') {
  for (const law of this.filterQueryParams) {
    if (law as Laws.LawDetail) {
      const selectedLaw = this.selectedLaws.find(x => x.languageCode === law.languageCode);
      if (selectedLaw) {
        for (const propName of Object.keys(law)) {
          selectedLaw[propName] = law[propName];
        }
      }
      else {
        this.selectedLaws.push(law);
      }
    }
  }
}

Answer 7

Using Spred Operator, you can update particular array value using following method

 let array = [ { id: 1, name: "One" }, { id: 2, name: "Two" }, { id: 3, name: "Three" }, ]; const label = "name"; const newValue = "Two Updated"; // Errow comes if index was string, so make sure it was integer const index = 1; // second element, const updatedArray = [ ...array.slice(0, index), { // here update data value ...array[index], [label]: newValue, }, ...array.slice(index + 1), ]; console.log(updatedArray);

Answer 8

import React,{useState} from 'react';


export function App(props) {
  const[myObject,setMyObject] = useState({
    "Name":"",
    "Age":""
  });
  const[myarray, setmyarray] = useState([]);
const addItem =() =>{
  setMyObject({...myObject,"Name":"Da","Age":"20"});
  setmyarray([...myarray, 1]);
};

  console.log(myarray);console.log(myObject);
  return (
    <div className='App'>
      <h1>Hello React.</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={addItem}>Add me</button>
    </div>

  );
}

// Log to console
console.log('Hello console')

Answer 9

 let array = [ { id: 1, name: "One", location: { lat: 23.2223, lng: 56.2214 } }, { id: 2, name: "Two", location: { lat: 23.2223, lng: 56.2214 } }, { id: 3, name: "Three", location: { lat: 23.2223, lng: 56.2214 } }, ]; 

I have this array like this what should I do? tell me please, above answer cannot mutate the location object.

Answer 10

 let array = [{id:1,name:'One'}, {id:2, name:'Two'}, {id:3, name: 'Three'}]; let array2 =[...array.slice(0, 0), Object.assign({}, array[0], { name:'new one' //change any property of idx }),...array.slice(0 + 1)] console.log(array); console.log(array2);

[...array.slice(0, idx), Object.assign({}, array[idx], {
               x:new_x  //change any property of idx
        }),...array.slice(idx + 1)]