Javascript/Lodash - Removing an item from an array (has the same id)

Question

I am trying to remove an item from an array that has several objects, where in some cases it may has the same id. Here is the array :

var array = [{
"outletId": "OjHJ104",
"items": [{
        "objectId": "lQnt4dmiPs",
        "inCart": false,
    },
    {
        "objectId": "lQnt4dmiPs",
        "inCart": true,
    },
    {
        "objectId": "lQnt4dmiPs",
        "inCart": false,
    },
    {
        "objectId": "lC6C96Ekua",
        "inCart": true,
    },
    {
        "objectId": "lC6C96Ekua",
        "inCart": false,
    },
    {
        "objectId": "lC6C96Ekua",
        "inCart": true,
    }
  ]
 }];

Let's say I want to remove the item with the objectId : lQnt4dmiPs

Using the below :

_.remove(array, { objectId: 'lQnt4dmiPs' });

It's true that it removes the item; however it removes all the objects that has the objectId : lQnt4dmiPs which is not the wanted behavior. I want to remove it only once (as the remove function triggers onclick..).

I believe that I am missing something here or rather I should use another lodash function.

It returns an array of the removed elements. So, from that returned array, just remove the first one, and add them back to the original object. — user47589
– user47589, Commented Jan 9, 2018 at 21:44
@Amy can you please extend more ? A example will be appreciated. — Hamza L.
– Hamza L., Commented Jan 9, 2018 at 21:46
First, can you elaborate on what you mean by " the remove function triggers onclick"? — user47589
– user47589, Commented Jan 9, 2018 at 21:48
@Amy I have a button with a - and + (an add to cart button) when the user clicks on - it should reduce the quantity of that item from the cart meaning that it should remove only one item from the the cart that has the same id to reduce its quantity. — Hamza L.
– Hamza L., Commented Jan 9, 2018 at 21:51
If you only want to remove one, you could use _.findIndex to get the index of the first item with matching id, then use Array.splice method to remove only that first item? — CRice
– CRice, Commented Jan 9, 2018 at 21:56

Tulir · Accepted Answer · 2018-01-09 21:57:42Z

7

Lodash doesn't have a function to do that directly (lodash#1114 closed as wontfix), but you can use _.findIndex and Array#splice:

var index = _.findIndex(array, { objectId: 'lQnt4dmiPs' })
// The second argument is the number of items to remove.
var removedItem = array.splice(index, 1)

answered Jan 9, 2018 at 21:57

Tulir

92811 silver badges21 bronze badges

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

1 Comment

Hamza L. Over a year ago

Good catch mate, simple and beautiful ! Thanks a lot !

JohanP · Accepted Answer · 2018-01-09 21:58:15Z

You can always just quickly roll your own solution, it is quite trivial.

var array = [{
"outletId": "OjHJ104",
"items": [{
        "objectId": "lQnt4dmiPs",
        "inCart": false,
    },
    {
        "objectId": "lQnt4dmiPs",
        "inCart": true,
    },
    {
        "objectId": "lQnt4dmiPs",
        "inCart": false,
    },
    {
        "objectId": "lC6C96Ekua",
        "inCart": true,
    },
    {
        "objectId": "lC6C96Ekua",
        "inCart": false,
    },
    {
        "objectId": "lC6C96Ekua",
        "inCart": true,
    }
  ]
 }];
  const remove = (arr, id) => {
      for(let i=0; i<arr.length;i++) {
         if(arr[i].objectId === id) {
            arr.splice(i,1);
            return;
         }
      }
  }
  remove(array[0].items,'lQnt4dmiPs');
  console.log(array);

Andrew · Accepted Answer · 2018-01-09 22:05:47Z

Use findIndex, which only finds the first instance. Then filter the array to remove that index number's element.

var array = [{
"outletId": "OjHJ104",
"items": [{
        "objectId": "lQnt4dmiPs",
        "inCart": false,
    },
    {
        "objectId": "lQnt4dmiPs",
        "inCart": true,
    },
    {
        "objectId": "lQnt4dmiPs",
        "inCart": false,
    },
    {
        "objectId": "lC6C96Ekua",
        "inCart": true,
    },
    {
        "objectId": "lC6C96Ekua",
        "inCart": false,
    },
    {
        "objectId": "lC6C96Ekua",
        "inCart": true,
    }
  ]
 }];
 
 const remove = (arr, str) => {
   const elIdx = arr.findIndex(({objectId}) => objectId === str)
   return arr.filter((_, idx) => idx !== elIdx)
 }
 
 console.log(remove(array[0].items, "lQnt4dmiPs"))

Collectives™ on Stack Overflow

Javascript/Lodash - Removing an item from an array (has the same id)

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related