Add / Overwrite an object in an array

Question

I am trying to overwrite an object in an array if the title property exists, otherwise just push it to the array. I found two approaches and I wonder which one is the preferred one.

Performance is not really an issue but I wonder whether mutability could be, or just there is a better way to do this altogether.

On this snippet I am using a for loop to edit the original array:

const data = [
  {
    title: 'AAA',
    people: [ 'John', 'Megan',]
  },{
    title: 'BBB',
    people: [ 'Emily', 'Tom']
  }
]

// If inputTitle is not on any of data's title it will append not overwrite
// e.g. const inputTitle = 'CCC'
const inputTitle = 'AAA'
const inputPeople = ['Peter', 'Jane']

for (const obj of data) {
  if (obj.title === inputTitle) {
    obj.people = inputPeople
    break
  } else {
    data.push({
      title: inputTitle,
      people: inputPeople
    })
    break
  }
}

console.log(data)

Here I am using high order functions and spread to do the same:

const data = [
  {
    title: 'AAA',
    people: [ 'John', 'Megan',]
  },{
    title: 'BBB',
    people: [ 'Emily', 'Tom']
  }
]

// If inputTitle is not on any of data's title it will append not overwrite
// e.g. const inputTitle = 'CCC'
const inputTitle = 'AAA'
const inputPeople = ['Peter', 'Jane']

let res = []

if (data.some(({ title }) => title === inputTitle)) {
  res = data.map(obj => {
    if (obj.title === inputTitle) 
      obj.people = inputPeople
    return obj
  })
} else {
  res = [...data, { title: inputTitle, people: inputPeople}]
}

console.log(res)

In the real task I am reading the data array from a json file with node and writing the changes back to it.

When you have working code and are asking for best practices, code style, mutability or performance considerations, then this is more suitable for Code Review — trincot
– trincot, Commented Mar 6, 2021 at 15:25

trincot · Accepted Answer · 2021-03-06 15:35:20Z

4

If this is a common use case that you will execute several times on the same data structure, then you are better off with a plain object keyed by title, as then the operation is trivial. You can still keep the title also as a property as you had it.

const data = {
  AAA: {
    title: 'AAA',
    people: [ 'John', 'Megan',]
  },
  BBB: {
    title: 'BBB',
    people: [ 'Emily', 'Tom']
  }
};

const title = 'AAA';
const people = ['Peter', 'Jane'];

data[title] = { title, people };  // yes, it's that simple then...

console.log(data);

If you really need the array structure, then you could consider to switch temporarily, then do all the manipulation, and then come back to the original format:

let data = [
  {
    title: 'AAA',
    people: [ 'John', 'Megan',]
  },
  {
    title: 'BBB',
    people: [ 'Emily', 'Tom']
  }
];

const title = 'AAA';
const people = ['Peter', 'Jane'];

// switch to other data structure...
let map = Object.fromEntries(data.map(o => [o.title, o]));

// Manipulate
map[title] = { title, people };

// ...and back:
data = Object.values(map);

console.log(data);

answered Mar 6, 2021 at 15:35

trincot

357k38 gold badges282 silver badges338 bronze badges

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

4 Comments

dgo Over a year ago

Oh my god I'm an idiot. This is such the obviously correct answer

trincot Over a year ago

But you are not the asker? Why would you say you're an idiot?

dgo Over a year ago

lol. Because the way I was trying to make it work was sooooooo hard and so cognitively taxing, and I spent awhile on it. When I saw your answer, it was immediately obvious that I had wasted much time and effort. I didn't even use your exact code - didn't even look at it really. As soon as I got your point, everything clicked.

trincot Over a year ago

Oh I see. Well, nice to hear it helped somehow! ;-)

ikiK · Accepted Answer · 2021-03-06 15:32:28Z

1

let newdata = {title: 'AAA',people: [ 'Peter', 'Jane']}
//Create new object 

data.find(c => c.title === newdata.title) !== undefined 
// if title data from new object is find in old
? data.find(c => c.title === newdata.title).people=newdata.people
// change data
 : data.push(newdata)
// in not push it as new

const data = [
  {
    title: 'CCC',
    people: [ 'John', 'Megan']
  },{
    title: 'BBB',
    people: [ 'Emily', 'Tom']
  }
]


let newdata = {title: 'AAA',people: [ 'Peter', 'Jane']}

data.find(c => c.title === newdata.title) !== undefined ? data.find(c => c.title === newdata.title).people=newdata.people : data.push(newdata)

console.log(data)

edited Mar 6, 2021 at 15:32

answered Mar 6, 2021 at 15:14

ikiK

6,5105 gold badges25 silver badges48 bronze badges

2 Comments

Álvaro Over a year ago

Here also it works if title exists but I want to push if it is a new title like for example CCC

ikiK Over a year ago

@Álvaro See now

equt · Accepted Answer · 2021-03-06 15:13:34Z

0

If only the matched items need to be updated, maybe a single forEach could solve this problem.

const data = [
  {
    title: 'AAA',
    people: [ 'John', 'Megan',]
  },{
    title: 'BBB',
    people: [ 'Emily', 'Tom']
  }
]

const inputTitle = 'AAA'
const inputPeople = ['Peter', 'Jane']

data.forEach(({ title }, index) => title === inputTitle ? data[index].people = inputPeople : null)

console.log(data)

answered Mar 6, 2021 at 15:13

equt

3222 silver badges9 bronze badges

1 Comment

Álvaro Over a year ago

Yes this works if the title exists, but not if the title is different like say CCC then it should push to it

Collectives™ on Stack Overflow

Add / Overwrite an object in an array

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related