Remove Object from Array using JavaScript

Question

How can I remove an object from an array  I wish to remove the object that includes name Kristian from someArray  For example  someArray     name  quot Kristian quot   lines  quot 2 5 10 quot                  name  quot John quot   lines  quot 1 19 26 96 quot      I want to achieve  someArray     name  quot John quot   lines  quot 1 19 26 96 quot

User · Answer

If you want to remove all occurrences of a given object (based on some condition) then use the javascript splice method inside a for the loop.

Since removing an object would affect the array length, make sure to decrement the counter one step, so that length check remains intact.

var objArr=[{Name:"Alex", Age:62},
  {Name:"Robert", Age:18},
  {Name:"Prince", Age:28},
  {Name:"Cesar", Age:38},
  {Name:"Sam", Age:42},
  {Name:"David", Age:52}
];

for(var i = 0;i < objArr.length; i ++)
{
  if(objArr[i].Age > 20)
  {
    objArr.splice(i, 1);
    i--;  //re-adjust the counter.
  }
}

The above code snippet removes all objects with age greater than 20.

User · Answer

Performance Today 2021 01 27 I perform tests on MacOs HighSierra 10 13 6 on Chrome v88  Safari v13 1 2 and Firefox v84 for chosen solutions  Results For all browsers   fast fastest solutions when element not exists  A and B fast fastest solutions for big arrays  C fast fastest solutions for big arrays when element exists  H quite slow solutions for small arrays  F and G quite slow solutions for big arrays  D  E and F   Details I perform 4 tests cases   small array  10 elements  and element exists - you can run it HERE small array  10 elements  and element NOT exists - you can run it HERE big array  milion elements  and element exists - you can run it HERE big array  milion elements  and element NOT exists - you can run it HERE  Below snippet presents differences between solutions A B C D E F G H I  x000D   x000D  function A arr  name      let idx   arr findIndex o   gt  o name  name     if idx gt  0  arr splice idx  1     return arr      function B arr  name      let idx   arr findIndex o   gt  o name  name     return idx lt 0   arr   arr slice 0 idx  concat arr slice idx 1 arr length        function C arr  name      let idx   arr findIndex o   gt  o name  name     delete arr idx     return arr      function D arr  name      return arr filter el   gt  el name    name       function E arr  name      let result         arr forEach o   gt  o name  name    result push o      return result      function F arr  name      return   reject arr  el   gt  el name    name       function G arr  name      let o   arr find o   gt  o name  name     return   without arr o       function H arr  name        each arr  function i         if arr i  name      Kristian               arr splice i 1             return false                  return arr      function I arr  name      return   grep arr o   gt  o name  name                Test let test1             name  Kristian   lines  2 5 10         name  John   lines  1 19 26 96          let test2             name  John3   lines  1 19 26 96         name  Kristian   lines  2 5 10         name  John   lines  1 19 26 96       name  Joh2   lines  1 19 26 96        let test3             name  John3   lines  1 19 26 96         name  John   lines  1 19 26 96       name  Joh2   lines  1 19 26 96        console log   Test1  original array from question Test2  array with more data Test3  array without element which we want to delete       A B C D E F G H I  forEach f  gt  console log   Test1   f name     JSON stringify f     test1   Kristian     Test2   f name     JSON stringify f     test2   Kristian     Test3   f name     JSON stringify f     test3   Kristian          x000D   lt script src  https   code jquery com jquery-3 5 1 min js  integrity  sha256-9 aliU8dGd2tb6OSsuzixeV4y faTqgFtohetphbbj0   crossorigin  anonymous  gt  lt  script gt      lt script src  https   cdnjs cloudflare com ajax libs lodash js 4 17 20 lodash min js  integrity  sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww    crossorigin  anonymous  gt   lt  script gt     This shippet only presents functions used in performance tests - it not perform tests itself  x000D   x000D   x000D   And here are example results for chrome

User · Answer

ES2015  let someArray                     name  Kristian   lines  2 5 10                    name  John   lines  1 19 26 96                    name  Kristian   lines  2 58 160                    name  Felix   lines  1 19 26 96                   someArray   someArray filter person   gt  person name     John      It will remove John

User · Answer

The clean solution would be to use Array filter   var filtered   someArray filter function el    return el Name     Kristian          The problem with this is that it does not work on IE  lt  9  However  you can include code from a Javascript library  e g  underscore js  that implements this for any browser

User · Answer

I guess the answers are very branched and knotted  You can use the following path to remove an array object that matches the object given in the modern JavaScript jargon   coordinates           lat  36 779098444109145  lng  34 57202827508546          lat  36 778754712956506  lng  34 56898128564454          lat  36 777414146732426  lng  34 57179224069215       coordinate     lat  36 779098444109145  lng  34 57202827508546     removeCoordinate coordinate  Coordinate   Coordinate       const found   this coordinates find  coordinate    gt  coordinate    coordinate       if  found          this coordinates splice found  1             return coordinate

User · Answer

I recommend using lodash js or sugar js for common tasks like this      lodash js someArray     reject someArray  function el    return el Name      Kristian           sugar js someArray remove function el    return el Name      Kristian         in most projects  having a set of helper methods that is provided by libraries like these is quite useful

User · Answer

I have made a dynamic function takes the objects Array  Key and value and returns the same array after removing the desired object   function removeFunction  myObjects prop valu                         return myObjects filter function  val                  return val prop      valu                             Full Example  DEMO  var obj                  results                                        id    460                      name    Widget 1                      loc    Shed                                        id    461                      name    Widget 2                      loc    Kitchen                                        id    462                      name    Widget 3                      loc    bath                                                         function removeFunction  myObjects prop valu                         return myObjects filter function  val                  return val prop      valu                             console log removeFunction obj results  id   460

User · Answer

splice i  1  where i is the incremental index of the array will remove the object   But remember splice will also reset the array length so watch out for  undefined   Using your example  if you remove  Kristian   then in the next execution within the loop  i will be 2 but someArray will be a length of 1  therefore if you try to remove  John  you will get an  undefined  error  One solution to this albeit not elegant is to have separate counter to keep track of index of the element to be removed

User · Answer

You could also try doing something like this    var myArray      name    test      name   test2     var myObject     name    test    myArray splice myArray indexOf myObject  1

User · Answer

Vote for the UndercoreJS for simple work with arrays     without   function helps to remove an element      without  1  2  1  0  3  1  4   0  1         gt   2  3  4

User · Answer

This answer   for  var i  0  i  lt  someArray length  i       if  someArray i  name      Kristian           someArray splice i 1          is not working for multiple records fulfilling the condition  If you have two such consecutive records  only the first one is removed  and the other one skipped  You have to use   for  var i   someArray length - 1  i gt   0  i--           instead

User · Answer

With ES 6 arrow function   let someArray                       name  Kristian   lines  2 5 10                      name  John   lines  1 19 26 96                      let arrayToRemove  name  Kristian   lines  2 5 10    someArray someArray filter  e   gt e name   arrayToRemove name  amp  amp  e lines   arrayToRemove lines

User · Answer

If you wanna access and remove object of an array simply you can try something like this    x000D   x000D     inside some function x000D   x000D  let someArray       ColumnName     a    PropertySerno    100005  UpdateType    1   x000D                      ColumnName     b    PropertySerno    100202  UpdateType    1  x000D           ShowRemoveButton    true     x000D           x000D          for  let item of someArray    x000D            delete item ShowRemoveButton  x000D            x000D          console log item outputMappingData Data   x000D           x000D    output will be like that       ColumnName     a    PropertySerno    100005  UpdateType    1   x000D                                   ColumnName     b    PropertySerno    100202  UpdateType    1     x000D           x000D   x000D   x000D

User · Answer

This is a function that works for me   function removeFromArray array  value        var idx   array indexOf value       if  idx     -1            array splice idx  1             return array

User · Answer

You could use array filter     e g            someArray     name  Kristian   lines  2 5 10                          name  John   lines  1 19 26 96              someArray   someArray filter function returnableObjects                  return returnableObjects name      Kristian                          someArray will now be     name  John   lines  1 19 26 96       Arrow functions   someArray   someArray filter x   gt  x name      Kristian

User · Answer

Simplest solution would be to create a map that stores the indexes for each object by name  like this     adding to array var newPerson    name  Kristian   lines  2 5 10   someMap  newPerson name     someArray length  someArray push  newPerson       deleting from the array var index   someMap   Kristian     someArray splice  index  1

User · Answer

Use javascript s splice   function    This may help  http   www w3schools com jsref jsref splice asp

User · Answer

Use splice function on arrays  Specify the position of the start element and the length of the subsequence you want to remove   someArray splice pos  1

User · Answer

someArray   jQuery grep someArray   function  value            return value name     Kristian

User · Answer

Returns only objects from the array whose property name is not  Kristian   var noKristianArray     grep someArray  function  el    return el name    Kristian          Demo    x000D   x000D   var someArray     x000D                   name  Kristian   lines  2 5 10    x000D                   name  John   lines  1 19 26 96    x000D                   name  Kristian   lines  2 58 160    x000D                   name  Felix   lines  1 19 26 96   x000D                     x000D       x000D  var noKristianArray     grep someArray  function  el    return el name    Kristian       x000D   x000D  console log noKristianArray   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

Here is an example with map and splice  x000D   x000D  const arrayObject         name   name1   value   value1         name   name2   value   value2         name   name3   value   value3         let index   arrayObject map  item    gt  item name  indexOf  name1    if  index  gt  -1         arrayObject splice index  1     console log  Result   arrayObject         x000D   x000D   x000D

User · Answer

Your  array  as shown is invalid JavaScript syntax  Curly brackets    are for objects with property name value pairs  but square brackets    are for arrays - like so   someArray     name  Kristian   lines  2 5 10     name  John   lines  1 19 26 96       In that case  you can use the  splice   method to remove an item  To remove the first item  index 0   say   someArray splice 0 1       someArray     name  John   lines  1 19 26 96       If you don t know the index but want to search through the array to find the item with name  Kristian  to remove you could to this   for  var i  0  i  lt  someArray length  i       if  someArray i  name      Kristian           someArray splice i 1         break         EDIT  I just noticed your question is tagged with  jQuery   so you could try the   grep   method   someArray     grep someArray                     function o i    return o name      Kristian                         true

User · Answer

Although this is probably not that appropriate for this situation I found out the other day that you can also use the delete keyword to remove an item from an array if you don t need to alter the size of the array e g   var myArray    1 2 3    delete myArray 1    console log myArray 1      undefined  console log myArray length     3 - doesn t actually shrink the array down

User · Answer

You could also use some   someArray     name  Kristian   lines  2 5 10                  name  John   lines  1 19 26 96      someArray some item   gt         if item name      Kristian      Case sensitive  will only remove first instance         someArray splice someArray indexOf item  1

User · Answer

This is what I use   Array prototype delete   function pos       this pos    undefined      var len   this length - 1      for var a   pos a  lt  this length - 1 a           this a    this a 1             this pop          Then it is as simple as saying  var myArray    1 2 3 4 5 6 7 8 9   myArray delete 3     Replace any number in place of three  After the expected output should be   console log myArray     Expected output 1 2 3 5 6 7 8 9

User · Answer

You can use map function also   someArray     name  Kristian   lines  2 5 10    name  John  lines  1 19 26 96     newArray     someArray map function obj  index       if obj name      Kristian           newArray push obj             someArray   newArray  console log someArray

User · Answer

There seems to be an error in your array syntax so assuming you mean an array as opposed to an object  Array splice is your friend here   someArray     name  Kristian   lines  2 5 10     name  John   lines  1 19 26 96     someArray splice 1 1

User · Answer

How about this     each someArray  function i       if someArray i  name      Kristian             someArray splice i 1           return false

User · Answer

This Concepts using Kendo Grid   var grid       addNewAllergies   data  kendoGrid     var selectedItem   SelectedCheckBoxList   for  var i   0  i  lt  selectedItem length  i          if selectedItem i  boolKendoValue  true                selectedItem length  0

User · Answer

You can use several methods to remove item s  from an Array     1 someArray shift       first element removed   2 someArray   someArray slice 1      first element removed   3 someArray splice 0  1      first element removed   4 someArray pop       last element removed   5 someArray   someArray slice 0  a length - 1      last element removed   6 someArray length   someArray length - 1     last element removed   If you want to remove element at position x  use   someArray splice x  1     Or  someArray   someArray slice 0  x  concat someArray slice -x      Reply to the comment of  chill182  you can remove one or more elements from an array using Array filter  or Array splice combined with Array findIndex  see MDN   e g    x000D   x000D     non destructive filter  gt  noJohn   John removed  but someArray will not change x000D  let someArray   getArray    x000D  let noJohn   someArray filter  el   gt  el name      John      x000D  log  non destructive filter  gt  noJohn      format noJohn    x000D  log    someArray length   someArray length     x000D   x000D     destructive filter reassign John removed  gt  someArray2   x000D  let someArray2   getArray    x000D  someArray2   someArray2 filter  el   gt  el name      John     x000D  log      destructive filter reassign John removed  gt  someArray2      x000D    format someArray2    x000D  log    someArray2 length   someArray2 length     x000D   x000D     destructive splice  w findIndex Brian remains  gt  someArray3   x000D  let someArray3   getArray    x000D  someArray3 splice someArray3 findIndex v   gt  v name      Kristian    1   x000D  someArray3 splice someArray3 findIndex v   gt  v name      John    1   x000D  log      destructive splice  w findIndex Brian remains  gt  someArray3      x000D    format someArray3    x000D  log    someArray3 length   someArray3 length     x000D   x000D     Note  if you re not sure about the contents of your array   x000D     you should check the results of findIndex first x000D  let someArray4   getArray    x000D  const indx   someArray4 findIndex v   gt  v name      Michael    x000D  someArray4 splice indx  indx  gt   0   1   0   x000D  log      check findIndex result first  gt  someArray4  nothing is removed   gt     x000D    format someArray4    x000D  log    someArray4 length  should still be 3    someArray4 length     x000D   x000D  function format obj    x000D    return JSON stringify obj  null        x000D    x000D   x000D  function log    txt    x000D    document querySelector  pre   textContent       txt join   n    n  x000D    x000D   x000D  function getArray     x000D    return    name   Kristian   lines   2 5 10    x000D              name   John   lines   1 19 26 96    x000D              name   Brian   lines   3 9 62 36      x000D    x000D   lt pre gt  x000D    Results   x000D   x000D   lt  pre gt  x000D   x000D   x000D

[javascript] Remove Object from Array using JavaScript

Examples related to javascript

Examples related to arrays