is there a function in lodash to replace matched item

Question

I wonder if there is a simpler method in lodash to replace an item in a JavaScript collection   Possible duplicate but I did not understand the answer there    I looked at their documentation but could not find anything  My code is   var arr     id  1  name   Person 1     id 2  name  Person 2        Can following code be reduced to something like   XX arr   id 1    id 1  name   New Name       each arr  function a  idx     if a id     1       arr idx     id 1  name   Person New Name        return false             each arr  function a     document write a name         Update  The object I m trying to replace with has many properties like   id  1  Prop1       Prop2      and so on   Solution   Thanks to dfsq but I found a proper solution within lodash that seems to work fine and is pretty neat and I put it in a mixin as well since I ve this requirement at many places  JSBin  var update   function arr  key  newval      var match     find arr  key     if match        merge match  newval     else     arr push newval             mixin     update   update      var arr     id  1  name   Person 1     id 2  name  Person 2         update arr   id 1    id 1  name   New Val       document write JSON stringify arr      Faster Solution As pointed out by  dfsq  following is way faster  var upsert   function  arr  key  newval        var match     find arr  key       if match           var index     indexOf arr    find arr  key            arr splice index  1  newval         else           arr push newval

User · Answer

If you re just trying to replace one property  lodash   find and   set should be enough   var arr     id  1  name   Person 1     id  2  name   Person 2        set   find arr   id  1     name    New Person

User · Answer

ES6  This code works for me    let result   array map item   gt  item id     updatedItem id   updatedItem   item

User · Answer

Seems like the simplest solution would to use ES6 s  map or lodash s   map   var arr     id  1  name   Person 1     id  2  name   Person 2         lodash var newArr     map arr  function a      return a id     1    id  1  name   Person New Name     a          ES6 var newArr   arr map function a      return a id     1    id  1  name   Person New Name     a        This has the nice effect of avoiding mutating the original array

User · Answer

Immutable  suitable for ReactJS   Assume   cosnt arr     id  1  name   Person 1     id 2  name  Person 2       The updated item is the second and name is changed to Special Person   const updatedItem    id 2  name  Special Person      Hint  the lodash has useful tools but now we have some of them on Ecmascript6   so I just use map function that is existed on both of lodash and ecmascript6    const newArr   arr map item   gt  item id     2   updatedItem   item

User · Answer

You can do it without using lodash   let arr     id  1  name   Person 1     id  2  name   Person 2     let newObj    id  1  name   new Person      Add new prototype function on Array class   Array prototype  replaceObj   function newObj  key      return this map obj   gt   obj key      newObj key    newObj   obj          return   id  1  name   new Person     id  2  name   Person 2      arr  replaceObj newObj   id

User · Answer

If you re looking for a way to immutably change the collection  as I was when I found your question   you might take a look at immutability-helper  a library forked from the original React util  In your case  you would accomplish what you mentioned via the following   var update   require  immutability-helper   var arr     id  1  name   Person 1     id 2  name  Person 2    var newArray   update arr    0    name     set   New Name             gt    id  1  name   New Name     id 2  name  Person 2

User · Answer

If the insertion point of the new object does not need to match the previous object s index then the simplest way to do this with lodash is by using   reject and then pushing new values in to the array   var arr         id  1  name   Person 1          id  2  name   Person 2        arr     reject arr    id  1     arr push   id  1  name   New Val          result will be     id  2  name   Person 2       id  1  name   New Val       If you have multiple values that you want to replace in one pass  you can do the following  written in non-ES6 format    var arr         id  1  name   Person 1          id  2  name   Person 2          id  3  name   Person 3        idsToReplace    2  3   arr     reject arr  function o    return idsToReplace indexOf o id   gt  -1      arr push   id  3  name   New Person 3      arr push   id  2  name   New Person 2           result will be     id  1  name   Person 1       id  3  name   New Person 3       id  2  name   New Person 2

User · Answer

Using lodash unionWith function  you can accomplish a simple upsert to an object   The documentation states that if there is a match  it will use the first array  Wrap your updated object in      array  and put it as the first array of the union function   Simply specify your matching logic and if found it will replace it and if not it will add it   Example   let contacts           type   email   desc   work   primary  true  value   email prim           type   phone   desc   cell   primary  true  value  phone prim          type   phone   desc   cell   primary  false value  phone secondary          type   email   desc   cell   primary  false value  email secondary         Update contacts because found a match   unionWith   type   email   desc   work   primary  true  value   email updated     contacts   l  r    gt  l type    r type  amp  amp  l primary    r primary      Add to contacts - no match found   unionWith   type   fax   desc   work   primary  true  value   fax added     contacts   l  r    gt  l type    r type  amp  amp  l primary    r primary

User · Answer

function findAndReplace arr  find  replace      let i    for i 0  i  lt  arr length  amp  amp  arr i  id    find id  i         i  lt  arr length   arr i    replace   arr push replace       Now let s test performance for all methods    x000D   x000D     TC s first approach x000D  function first arr  a  b    x000D      each arr  function  x  idx    x000D      if  x id     a id    x000D        arr idx    b  x000D        return false  x000D        x000D        x000D    x000D   x000D     solution with merge x000D  function second arr  a  b    x000D    const match     find arr  a   x000D    if  match    x000D        merge match  b   x000D      else   x000D      arr push b   x000D      x000D    x000D   x000D     most voted solution x000D  function third arr  a  b    x000D    const match     find arr  a   x000D    if  match    x000D      var index     indexOf arr    find arr  a    x000D      arr splice index  1  b   x000D      else   x000D      arr push b   x000D      x000D    x000D   x000D     my approach x000D  function fourth arr  a  b   x000D    let l  x000D    for l 0  l  lt  arr length  amp  amp  arr l  id    a id  l       x000D    l  lt  arr length   arr l    b   arr push b   x000D    x000D   x000D  function test fn  times  el    x000D    const arr       size   250  x000D    for  let i   0  i  lt  size  i      x000D      arr i     id  i  name   name   i    test   test    x000D      x000D   x000D    let start   Date now    x000D      times times       gt    x000D      const id   Math round Math random     size   x000D      const a    id   x000D      const b    id  name     id  name    x000D      fn arr  a  b   x000D        x000D    el innerHTML   Date now   - start  x000D    x000D   x000D  test first  1e5  document getElementById  first     x000D  test second  1e5  document getElementById  second     x000D  test third  1e5  document getElementById  third     x000D  test fourth  1e5  document getElementById  fourth     x000D   lt script src  https   cdnjs cloudflare com ajax libs lodash js 4 14 1 lodash min js  gt  lt  script gt  x000D   lt div gt  x000D     lt ol gt  x000D       lt li gt  lt b id  first  gt  lt  b gt  ms  TC s first approach  lt  li gt  x000D       lt li gt  lt b id  second  gt  lt  b gt  ms  solution with merge  lt  li gt  x000D       lt li gt  lt b id  third  gt  lt  b gt  ms  most voted solution  lt  li gt  x000D       lt li gt  lt b id  fourth  gt  lt  b gt  ms  my approach  lt  li gt  x000D     lt  ol gt  x000D   lt div gt  x000D   x000D   x000D

User · Answer

As the time passes you should embrace a more functional approach in which you should avoid data mutations and write small  single responsibility functions  With the ECMAScript 6 standard  you can enjoy functional programming paradigm in JavaScript with the provided map  filter and reduce methods  You don t need another lodash  underscore or what else to do most basic things    Down below I have included some proposed solutions to this problem in order to show how this problem can be solved using different language features    Using ES6 map   x000D   x000D  const replace   predicate   gt  replacement   gt  element   gt  x000D    predicate element    replacement   element x000D    x000D  const arr       id  1  name   Person 1       id 2  name  Person 2       x000D  const predicate   element   gt  element id     1 x000D  const replacement     id  100  name   New object     x000D   x000D  const result   arr map replace  predicate   replacement   x000D  console log result  x000D   x000D   x000D      Recursive version - equivalent of mapping   Requires destructuring and array spread    x000D   x000D  const replace   predicate   gt  replacement   gt  x000D    x000D    const traverse     head     tail     gt  x000D      head x000D         predicate head    replacement   head     tail  x000D           x000D    return traverse x000D    x000D    x000D  const arr       id  1  name   Person 1       id 2  name  Person 2       x000D  const predicate   element   gt  element id     1 x000D  const replacement     id  100  name   New object     x000D   x000D  const result   replace  predicate   replacement   arr  x000D  console log result  x000D   x000D   x000D      When the final array s order is not important you can use an object as a HashMap data structure  Very handy if you already have keyed collection as an object - otherwise you have to change your representation first   Requires object rest spread  computed property names and Object entries    x000D   x000D  const replace   key   gt    id     values     gt  hashMap   gt  x000D     x000D       hashMap          original HashMap x000D     key   undefined    delete the replaced value x000D     id   values        assign replacement x000D     x000D   x000D     HashMap  lt - gt  array conversion x000D  const toHashMapById   array   gt  x000D    array reduce  x000D       acc    id     values      gt   x000D            acc   id   values    x000D          x000D     x000D  const toArrayById   hashMap   gt  x000D    Object entries hashMap  x000D     filter     filter out undefined values x000D           value     gt  value  x000D       x000D     map  x000D        id  values     gt     id     values    x000D      x000D   x000D  const arr       id  1  name   Person 1       id 2  name  Person 2       x000D  const replaceKey   1 x000D  const replacement     id  100  name   New object     x000D   x000D     Create a HashMap from the array  treating id properties as keys x000D  const hashMap   toHashMapById arr  x000D  console log hashMap  x000D   x000D     Result of replacement - notice an undefined value for replaced key x000D  const resultHashMap   replace  replaceKey   replacement   hashMap  x000D  console log resultHashMap  x000D   x000D     Final result of conversion from the HashMap to an array x000D  const result   toArrayById  resultHashMap  x000D  console log result  x000D   x000D   x000D

User · Answer

You can also use findIndex and pick to achieve the same result     var arr      id  1  name   Person 1     id 2  name  Person 2       var data    id  2  name   Person 2  updated       var index     findIndex arr    pick data   id       if  index     -1        arr splice index  1  data       else       arr push data

User · Answer

Came across this as well and did it simply that way   const persons     id  1  name   Person 1     id 2  name  Person 2     const updatedPerson    id  1  name   new Person Name   const updatedPersons   persons map person   gt      person id     updated id       updatedPerson       person      If wanted we can generalize it  const replaceWhere    list  predicate  replacement    gt      return list map item   gt  predicate item    replacement   item     replaceWhere persons  person   gt  person id     updatedPerson id  updatedPerson

User · Answer

In your case all you need to do is to find object in array and use Array prototype splice   method  read more details here    x000D   x000D  var arr     id  1  name   Person 1     id 2  name  Person 2     x000D   x000D     Find item index using   findIndex  thanks  AJ Richardson for comment  x000D  var index     findIndex arr   id  1    x000D   x000D     Replace item at index using native splice x000D  arr splice index  1   id  100  name   New object      x000D   x000D      console log  result x000D  document write JSON stringify  arr     x000D   lt script src    cdnjs cloudflare com ajax libs lodash js 2 4 1 lodash min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

var arr    id  1  name   Person 1     id 2  name  Person 2     var index     findIndex arr   id  1    arr index     id  100  name   xyz

User · Answer

Not bad variant too   var arr     id  1  name   Person 1     id  2  name   Person 2      var id   1    id to find  arr   find arr   id  id    name    New Person

[javascript] is there a function in lodash to replace matched item

Examples related to javascript

Examples related to lodash