id is undefined when removing an element from an array

Question

I have an Array of object

var Country = [];

It is something like

{
    "Name" : "IND"
    "Capital" : "Delhi"
    id : someID1
},
{
    "Name" : "USA"
    "Capital" : "WS"
    id : someID2
},
{
    "Name" : "UK"
    "Capital" : "London"
    id : someID3
}

Now I want to delete on of the element on certain condition. But it is throwing an error for more than 2 record.

My Error is : Cannot read property 'id' of undefined

My code is

remove : function(me, record, index){
    var CountryRec = this.Country;
    var CountryLen = this.Country.length;
    for(var i=0; i<CountryLen; i++){
        if(record.data.id == this.CountryRec[i].id){
            //delete this.checkRec[i];
            checkRec.splice(i,1);
        }
    }
}

This is throwing an error for more than 2 record. Please suggest me what I am doing wrong.

iterate in reverse order, then use splice or decrement `i` on removal — Satpal, Sep 11 '17 at 07:03

Suren Srapyan · Answer 1 · 2017-09-11T07:07:35.660

3

var CountryLen = this.Country.length;

This condition returns 3 to you. But when you delete any element from the array, you indexes are rearranged. So for the first iteration you get an array with two elements indexed 0 and 1. And before the last iteration your get for i value 2, but your array contains one element which index is 0. So when you run record.data.id == this.CountryRec[i].id, it goes to the index 2 which is undefined.

If your id's are unique, use break.

edited Sep 11 '17 at 07:07

answered Sep 11 '17 at 07:03

Suren Srapyan

66,568
14
114
112

Yes I understood. But shall I use break here – David Sep 11 '17 at 07:07

score 2 · Accepted Answer · answered Sep 11 '17 at 07:04

2

Assuming, you have unique id, then you could leave the loop after splicing with break

var CountryRec = this.Country;
var CountryLen = this.Country.length;
for (var i = 0; i < CountryLen; i++) {
    if(record.data.id == CountryRec[i].id) {
        CountryRec.splice(i, 1);
        break;
    }
}

answered Sep 11 '17 at 07:04

Nina Scholz

376,160
25
347
392

Even I also thought the same but was not sure. Thanks for your answer – David Sep 11 '17 at 07:09

score 1 · Answer 3 · answered Sep 11 '17 at 07:08

var Country = [
{
    "Name" : "IND",
    "Capital" : "Delhi",
    'id' : 'someID1'
},
{
    "Name" : "USA",
    "Capital" : "WS",
    'id' : 'someID2'
},
{
    "Name" : "UK",
    "Capital" : "London",
    'id' : 'someID3'
}];

var CountryRec = this.Country;
var CountryLen = this.Country.length;
for(var i=0; i<CountryLen; i++){
    if('someID2' == this.CountryRec[i].id){
        console.log(this.CountryRec.splice(i,1));
        break;
    }
}

score 1 · Answer 4 · answered Sep 11 '17 at 07:24

I'd like to add to @SurenSrapyan's answer.

The function "splice" changes the array. So if checkRec is a reference to an array, and there is another reference to same array, this could cause issues. That's because how JS handles references to objects. You will need to do proper clone when creating checkRec. There are many different ways to do an array or object clone. Read this.

So for example, if you're doing something like this:

var checkRec = myRec;

instead, do it this way:

var checkRec = some_clone_function(myRec);

This is the way which also impressed me to do change my code. Thanks for this idea — David, Sep 11 '17 at 07:31

id is undefined when removing an element from an array

4 Answers4