AngularJS Removing Item from Array Leaves undefined in place of object

Question

I have been working on an AngularJS project and have come across this issue before. I have the following array in my controller like so:

$scope.items = [];

I then fill this array with objects from a call to our REST API:

$http.get(API_URL_HERE).then(onSuccess);

The onSuccess method is called and the objects fill the array. I now have:

console.log($scope.items) resulting in [Object, Object, Object, ...]

Now when I use the $scope.items in an AngularJS ng-repeat loop it works great, as it should BUT if I try to remove an element from the $scope.items array, it always seems to remove the element BUT replaces it with an undefined value and this undefined value is interpreted by AngularJS in the ng-repeat loop and outputs an empty row in the template with no data. This causes issues if using ng-show / ng-hide for example as even though you have no real objects in the array, it still sees it as full because it is full of [undefined, undefined, undefined ...].

This is causing major headaches and I have seen other people with same issue but the fixes don't seem to work well.

codeguy · Accepted Answer · 2015-10-21 10:22:45Z

1

The solution I have found to this, that seems to work well is below. Please also note that some people have said this is just a pure Javascript issue, well I don't think it is, when I tried it within AngularJS and pure Javascript, I got 2 different results with the same setup and data.

For example I have a $scope.remove method which handles removing items from the $scope.items array.

When I do the following code:

$scope.items.splice(index, 1);

It results in this console.log output [Object, Object, undefined, Object, ...].

However, by doing the following code:

$scope.items.splice(index, 1); $scope.items.pop();

Results in the following output from console.log [Object, Object, Object] and my ng-repeat loop updates as it should without the empty rows.

My solutions seems to work fine but please do let me know if you find anything wrong with it. This code certainly looks cleaner than some of the others I have spotted on different sites and is working across all browsers I have tested.

UPDATE

My onSuccess method looks like this:

var onSuccess = function(response){

    $scope.items = response.data.items;
    //results in [Object, Object, Object, ...]

};

My $scope.remove method looks like this:

$scope.remove = function(index){

    $scope.items.splice(index, 1);
    //results in [Object, Object, undefined, Object, ...]

    //add the following code
    $scope.items.pop();
    //results in [Object, Object, Object, ...] the undefined has gone

};

And only when adding in the pop method does it work as it should.

edited Oct 21, 2015 at 10:22

answered Oct 21, 2015 at 9:58

codeguy

7105 silver badges22 bronze badges

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

6 Comments

Andrzej Czerwoniec Over a year ago

Could you show your code where you loop over the elements? And where is your splice code located? It should work without any additional statements

Andrzej Czerwoniec Over a year ago

Alright, but where is the remove method invoked? I want to make sure that digest loop runs after that - could you please try changing $scope.items.pop(); for $scope.$apply(); for a second and see if it changes anything?

codeguy Over a year ago

Hey, I have tried that before and I just get the AngularJS error: $digest already in progress. Thanks

codeguy Over a year ago

Sorry Andrzef, the method is invoked on ng-click inside a div with the ng-controller set.

Andrzej Czerwoniec Over a year ago

Than it is very strange for me. You display the list with ng-repeat, something like <tr ng-repeat="item in items"> is that right?

|

Collectives™ on Stack Overflow

AngularJS Removing Item from Array Leaves undefined in place of object

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related