Overwrite an Object inside an Array of Objects

Question

What is the best way to overwrite an object inside an array of objects?

I would like to have only one object per username, in this case in the initial arr Francis has a showMessage to true but userDetails has the same username but different value for the showMessage so I would like to overwrite this last object in the array.

Expected output:

[
  { showMessage: true, username: 'Joe' },
  { showMessage: true, username: 'Douglas' },
  { showMessage: false, username: 'Francis' }
]

Current code:

let obj = {};
let arr = [
{showMessage: true, username: "Joe"}, 
{showMessage: true, username: "Douglas"}, 
{showMessage: true, username: "Francis"}  
]

const userDetails = {
  showMessage: false,
  username: 'Francis',
}
objJSON = userDetails

var newData = [...arr, userDetails] 
console.log("newData: ",newData);

Unless you have some map from username to array index, you need to find the index of the object with username: "Francis" in the array and then update it. — jarmod
– jarmod, Commented May 18, 2022 at 17:11

Roko C. Buljan · Accepted Answer · 2022-05-18 17:28:47Z

1

Use Object.assign after finding in array the object which matches the username — in order to overwrite/modify the object data with another Object of data

const arr = [
  {showMessage: true, username: "Joe"}, 
  {showMessage: true, username: "Douglas"}, 
  {showMessage: true, username: "Francis"}  
]

const userDetails = {
  showMessage: false,
  username: 'Francis',
};

// Update user data by username (if object is found in array):
const oldDetails = arr.find(user => user.username === userDetails.username);
oldDetails && Object.assign(oldDetails, userDetails);

console.log(arr);

edited May 18, 2022 at 17:28

answered May 18, 2022 at 17:15

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

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

Comments

dave · Accepted Answer · 2022-05-18 17:16:25Z

I would typically find the index with that username, if it exists, splice the new object into that position, if not, splice the new object onto the end

let arr = [
    {showMessage: true, username: "Joe"}, 
    {showMessage: true, username: "Douglas"}, 
    {showMessage: true, username: "Francis"}  
]

const userDetails = {
  showMessage: false,
  username: 'Francis',
}

const set = (obj) => {
    const i = arr.findIndex(el => el.username === obj.username);
    arr.splice(i === -1 ? arr.length : i, i === -1 ? 0 : 1, obj);
    return arr;
}

var newData = set(userDetails)
console.log("newData: ",newData);

Which works both for adding a new object, and editing an existing

However, I'd generally avoid the issue entirely by using the username as a key, instead of an array:

let arr = {
    Joe: {showMessage: true, username: "Joe"}, 
    Douglas: {showMessage: true, username: "Douglas"}, 
    Francis: {showMessage: true, username: "Francis"}  
}

const userDetails = {
  showMessage: false,
  username: 'Francis',
}

const set = (obj) => {
   arr[obj.username] = obj
}

set(userDetails)
console.log("newData: ", Object.values(arr));

Nika Nabakhteveli · Accepted Answer · 2022-05-18 17:17:28Z

0

let arr = [
  { showMessage: true, username: "Joe" },
  { showMessage: true, username: "Douglas" },
  { showMessage: true, username: "Francis" },
];

const userDetails = {
  showMessage: false,
  username: "Francis",
};

const newData = [...arr];

for (let i = 0; i < newData.length; i++) {
    if (arr[i].username == userDetails.username) {
        newData[i] = userDetails;
    }
}

console.log("newData: ", newData);

answered May 18, 2022 at 17:17

Nika Nabakhteveli

1452 silver badges11 bronze badges

Comments

Relcode · Accepted Answer · 2022-05-18 17:26:17Z

0

Just map through the object and reassign the value with the desired one.

let obj = {};
let arr = [
{showMessage: true, username: "Joe"}, 
{showMessage: true, username: "Douglas"}, 
{showMessage: true, username: "Francis"}  
]

const userDetails = {
  showMessage: false,
  username: 'Francis',
}

arr.map((user) => {
  if(user.username === userDetails.username){
      user.showMessage = userDetails.showMessage
  }
})

var newData = [...arr] 
console.log("newData: ",newData);

answered May 18, 2022 at 17:26

Relcode

5211 gold badge8 silver badges18 bronze badges

Comments

Scott Sauyet · Accepted Answer · 2022-05-18 18:53:10Z

We can separate out the match-testing from the object merging by writing a generic version that takes a predicate. Here's a version that does this in an immutable manner:

const mergeWhere = (pred) => (objs, obj) => 
  objs .map (o => pred (obj, o) ? Object .assign ({}, o, obj) : o)

const updateUser = mergeWhere ((a, b) => a.username == b.username)


const arr = [{showMessage: true, username: "Joe"}, {showMessage: true, username: "Douglas"}, {showMessage: true, username: "Francis"}]
const userDetails = {showMessage: false, username: 'Francis'}


console .log (updateUser (arr, userDetails))

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

This merges our output into all matching inputs. We could do it for just the first one with something like

const mergeWhere = (pred) => (objs, obj, index = objs .findIndex (o => pred (obj, o))) =>
  index == -1
    ? [...objs]
    : [...objs .slice (0, index), Object .assign ({}, objs [index], obj) , objs .slice (index + 1)]

Collectives™ on Stack Overflow

Overwrite an Object inside an Array of Objects

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related