Removing an object in AngularJS

Question

I have a $rootScope object in AngularJS like this:

$rootScope.stuff = {
    someId: {
        name: "Patrick",
        age: 105
    },
    anotherId: {
        name: "Joseph",
        age: 94
    }
};

I have a function defined that adds objects to $rootScope.stuff, and it works fine:

$rootScope.addSomeStuff = function(id, data) {
    $rootScope.stuff[id] = data;
};

However, I also have a function that tries to delete (based on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete), and it is not working:

$rootScope.deleteStuff = function(id) {
    delete $rootScope.stuff[id];
};

When I check $rootScope.stuff[id] I am getting the correct object that I want to delete. I have also tried splice, but that throws an error like I thought it would. Any suggestions? Thanks.

Sure. `$rootScope.stuff.splice($rootScope.stuff[id], 1);` And I got the error "TypeError: $rootScope.stuff.splice is not a function." — psnoonan, Jun 25 '15 at 21:21
Just to confirm - you named the arg that you're passing into the delete method "id" but you're actually passing in the index of the object you want to delect, correct? $rootScope.deleteStuff = function(index) — jordajm, Jun 25 '15 at 21:24
Splice only works on arrays, correct? $rootScope.stuff is just an object. — psnoonan, Jun 25 '15 at 21:24
@psnoonan -- Why dont you think `delete $rootScope.stuff[id];` works? — tymeJV, Jun 25 '15 at 21:25
Thanks, I should of asked to see your markup. It might be worth looking at this answer if you have similar markup. [How to remove elements/nodes from angular.js array](http://stackoverflow.com/a/18303310/4498202) — John Cooling, Jun 25 '15 at 21:26
@tymeJV -- I am getting "TypeError: $rootScope.stuff.splice is not a function." — psnoonan, Jun 25 '15 at 21:27

jordajm · Accepted Answer · 2015-06-25T22:01:45.543

5

Change the object to an array of objects, then pass in the index of the object you want to delete:

$rootScope.stuff = [
    someId: {
        name: "Patrick",
        age: 105
    },
    anotherId: {
        name: "Joseph",
        age: 94
    }
];



$rootScope.deleteStuff = function(index) {
    delete $rootScope.stuff[index];
};

HTML (assuming this is rendered via ng-repeat):

<button ng-click="deleteStuff($index)"></button>

EDIT

If you need to keep the data as an object, it will be a difficult data structure to work with because the ID of each object is actually not an ID but an object with a name and an age. So, I actually don't know if it'll be possible to delete the entire object. You could delete the name and the age but without a unique identifier for the whole object I don't know how you'd delete the object itself.

edited Jun 25 '15 at 22:01

answered Jun 25 '15 at 21:27

jordajm

764
5
11

Yeah, I am sure that will work, but I still want to know why delete doesn't work if I want to keep it as an object and not an array. – psnoonan Jun 25 '15 at 21:31
It is in this answer, but not in how my code is set up. It is one big object. when I check `angular.isArray($rootScope.stuff);` I get false. And I also get `TypeError: $rootScope.stuff.splice is not a function` when I try to use splice. – psnoonan Jun 25 '15 at 21:37
for objects you use dot notation to identify the value of the key that you want to delete like this "delete stuff.someId.name" - but since you don't have an actual ID for the object you're deleting it may be impossible to delete it. – jordajm Jun 25 '15 at 22:05

Removing an object in AngularJS

1 Answers1