How to delete a Javascript object element?

Question

I'm using the following code to update any given property inside a JS object:

var main = {
          items: [
                  {
                    "name": "T-Shirt",
                    "description": "Green XL",
                    "quantity": "1",
                  },
                  {
                    "name": "Shoes",
                    "description": "Running, Size 10.5",
                    "quantity": "2",
                  }
                ]
        };

let project = main.items.find((p) => {
    return p.name === 'Shoes';
});

project.quantity = '3';
console.log(main); //shoes quantity is now 3

And it works, however, i want it to also be able to delete the whole project variable (for example, the whole Shoes block). I tried:

let project = main.items.find((p) => {
    return p.name === 'Shoes';
});
delete project;

console.log(main); //shoes still exist

But it doesn't work. What would be the best way to delete the property?

Edit: My main issue here was about finding the index of the element to be deleted. The chosen answer below provides the solution.

@Seblor In my research i tried applying the answers listed there but i wasn't able to getthe `index` of the array element i want to delete — Esquirish, Aug 18 '21 at 00:28
To get the index, you just need to use `findIndex` instead of `find`. — Seblor, Aug 18 '21 at 00:30
Familiarize yourself with [how to access and process nested objects, arrays or JSON](/q/11922383/4642212) and how to [create objects](//developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Object_initializer) and use the available static and instance methods of [`Object`](//developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object#Static_methods) and [`Array`](//developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array#Static_methods). — Sebastian Simon, Aug 18 '21 at 00:49

score 1 · Answer 1 · answered Aug 18 '21 at 00:44

1

You can use Array#filter.

main.items = main.items.filter(p => p.name !== 'Shoes');

answered Aug 18 '21 at 00:44

Unmitigated

76,500
11
62
80

Thanks for your insight, for some reason, when using this code and then the resulting object is processed by my application, it returns an error, but when i use the code in the accepted solution it works fine. – Esquirish Aug 18 '21 at 02:07

score 0 · Accepted Answer · answered Aug 18 '21 at 00:22

0

You cannot use the delete operator like this. To remove the found item from the array in-place, you will want to use Array#splice()

const foundIndex = main.items.findIndex((p) => {
  return p.name === 'Shoes';
});

if (foundIndex !== -1) main.items.splice(foundIndex, 1)

answered Aug 18 '21 at 00:22

matpie

17,033
9
61
82

Thanks alot, this is exactly what i wanted to do. I was at a loss on how to find the array index of the property i wanted to delete. – Esquirish Aug 18 '21 at 00:32
this is not how it suppose to be done, as with this approach you are mutating the object which side effects is an anti pattern – Ernesto Aug 18 '21 at 00:43

How to delete a Javascript object element?

2 Answers2