JS: Replace some fields of an specific object inside of an array

Question

I got an object array which looks like this:

const items = [
  {_id: "Tk2dc3fq99qZ7YdQQ", parent: "Dn59y87PGhkJXpaiZ", content: "one", context: "default"}
  {_id: "uK4MYJJGa6ra9e99v", parent: "Dn59y87PGhkJXpaiZ", content: "two", context: "default"}
]

Note: items is readonly as it comes from prop in a react component

And I want to update the content by a given object like this:

const changeThis = { _id: "uK4MYJJGa6ra9e99v", context: "info" }

So the object with the matching ID should get 'info' as new context value while keeping all other elements:

[
  {_id: "Tk2dc3fq99qZ7YdQQ", parent: "Dn59y87PGhkJXpaiZ", content: "one", context: "default"}
  {_id: "uK4MYJJGa6ra9e99v", parent: "Dn59y87PGhkJXpaiZ", content: "two", context: "info"}
]

Another example

And...

const changeThis = { _id: "uK4MYJJGa6ra9e99v", context: "info", content: "new" }

...should change context and content of the matching object:

[
  {_id: "Tk2dc3fq99qZ7YdQQ", parent: "Dn59y87PGhkJXpaiZ", content: "one", context: "default"}
  {_id: "uK4MYJJGa6ra9e99v", parent: "Dn59y87PGhkJXpaiZ", content: "new", context: "info"}
]

My attempt

So first of all I would use map() to iterate throught the array, but how do I update all other fields using changeThis-object? I tried to use assign() and keys() and I tried to ignore the _id-key:

items.map((item, index) => {
  if (item._id === changeThis._id) {
    Object.assign(
      {},
      ...Object.keys(item).map(k => (
        {
          [k]: changeThis.indexOf(k) > -1 && k !== '_id'
            ? changeThis[k]
            : item[k]
        }
    ))
  }
});

why not if (..) Object.assign(item, changeThis) ?

user943702
– user943702

2017-12-04 23:06:17 +00:00
Commented Dec 4, 2017 at 23:06 — user943702
– user943702, Commented Dec 4, 2017 at 23:06

treyhakanson · Accepted Answer · 2017-12-05 01:24:16Z

5

A simple function will suffice here; keep in mind that you will need to use let or var instead of const for items; map does not edit in place, but rather returns a new array. You could edit in place, but I would not necessarily recommend it.

items = items.map(item => {
  return (item._id === changeThis._id) ?
    { ...item, ...changeThis } :
    item
});

By spreading the contents of changeThis into the object after the keys of item, any keys appearing in changeThis will override those from item. Keys non-duplicate keys from either object will also appear in the final result.

edited Dec 5, 2017 at 1:24

answered Dec 4, 2017 at 23:11

treyhakanson

5,0112 gold badges20 silver badges35 bronze badges

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

2 Comments

Nico Burns Over a year ago

A one-liner with... four lines? ;)

treyhakanson Over a year ago

I had had it in one line, and then realized it wasn't readable at all... I'll edit that, thanks 😅

Collectives™ on Stack Overflow

JS: Replace some fields of an specific object inside of an array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related