Removing an item from an array using index in vue JS returns an unexpected result

Question

So I have the following array:

var hdr = ("name", "date", "start_time", "selling_item", "total_call", 
           "end_time", "ad_num", "area", "order_num");
//this data is returned from db

Now I want to replace it with proper naming convention, so I do this:

renameTableHdr(hdrs){
        var handler = hdrs;

        for(var a = 0; a<hdrs.length; a++){
            // console.log(hdrs[a]);
            var itm = "";
            if(hdrs[a] === 'name'){
                itm = "Name";
            }
            if(hdrs[a] === 'ad_num'){
                itm = "Ad Number";
            }
            if(hdrs[a] === 'date'){
                itm = "Date";
            }
            if(hdrs[a] === 'order_num'){
                itm = "Order Number";
            }
            if(hdrs[a] === 'start_time'){
                itm = "Start Time";
            }
            if(hdrs[a] === 'area'){
                itm = "Area";
            }
            if(hdrs[a] === 'selling_item'){
                itm = "Selling Item";
            }
            if(hdrs[a] === 'end_time'){
                itm = "End Time";
            }
            if(hdrs[a] === 'total_call'){
                itm = "Total Call";
            }

            if(handler.indexOf(hdrs[a]) >= 0){
                handler.splice(handler.indexOf(hdrs[a]),1);
            }
            this.tempTblHdr.push(itm);
        }
    },

So if I'm not doing splice, data returned is correct or the expected one. But with splice, it's not doing it well.

Result without splice

(9) ["Ad Number", "Date", "Order Number", "Start Time", "Name", "Area", "Selling Item", "End Time", "Total Call", __ob__: Observer]

With Splice

(5) ["Ad Number", "Order Number", "Name", "Selling Item", "Total Call", __ob__: Observer]
//other 4 data are missing

I'm removing this items from handler for they are the main needed data that is needed to be in proper naming convention, and there's possibility that it is added. I'm renaming them without touching or changing their indexes. Am I doing the splice correctly?

@HMR Edited. I am testing it in my end, and copied the edited one. — Eem Jee
– Eem Jee, Commented Dec 12, 2018 at 9:12
You can translate this easier using a translate object: const translated = {name:'Name'};const hdrs = handler.map(item=>translated[item]); — HMR
– HMR, Commented Dec 12, 2018 at 9:12
Since handler and hdrs refer to the same object you will mutate both if you mutate one. — HMR
– HMR, Commented Dec 12, 2018 at 9:14

dquijada · Accepted Answer · 2018-12-12 09:34:34Z

When you remove an item from an array, you should do it backwards. The reason for this, is the index keeps growing, even if you deleted the item.

Hence, if I do:

let array = ["a", "b", "c", "d"];
for (let i = 0; i < array.length; i++) {
  console.log(array.splice(i, 1));
}

The first time it goes in, i equals 0, so it evaluates array[0] (so the element "a") and removes it from the array.

On the second iteration, i will be 1, and since my array is now ["b", "c", "d"], array[i] will be "c".

After skipping "b" and removing "c", the array will be ["b", "d"]. On the third iteration, i will be 2, and since that's the array, 2 is greater than array.length, it will stop there.

If you do it backwards, it removes "d"first, then "c" and so on, meaning it doesn't skip anything.

Since you are worried about your indexing, just add the items from the start with unsifht:

  renameTableHdr(hdrs){
    var handler = hdrs;

    for(var a = hdrs.length-1; a>=0; a--){
      // console.log(hdrs[a]);
      var itm = "";

      if(hdrs[a] === 'name'){
        itm = "Name";
      }
      if(hdrs[a] === 'ad_num'){
        itm = "Ad Number";
      }
      if(hdrs[a] === 'date'){
        itm = "Date";
      }
      if(hdrs[a] === 'order_num'){
        itm = "Order Number";
      }
      if(hdrs[a] === 'start_time'){
        itm = "Start Time";
      }
      if(hdrs[a] === 'area'){
        itm = "Area";
      }
      if(hdrs[a] === 'selling_item'){
        itm = "Selling Item";
      }
      if(hdrs[a] === 'end_time'){
        itm = "End Time";
      }
      if(hdrs[a] === 'total_call'){
        itm = "Total Call";
      }

      if(handler.indexOf(hdrs[a]) >= 0){
        handler.splice(handler.indexOf(hdrs[a]),1);
      }
      this.tempTblHdr.unshift(itm);
    }
},

Thanks for this input man! So good to have an explanation, it makes things clearer :)

HMR · Accepted Answer · 2018-12-12 09:30:49Z

1

I would simplify the translation in the following way by not mutating or using for loops:

function renameTableHdr(hdrs) {
  // console.log(hdrs[a]);
  const translate = {
    name: 'Name',
    ad_num: 'Ad Number',
    date: 'Date',
    order_num: 'Order Number',
    start_time: 'Start Time',
    area: 'Area',
    selling_item: 'Selling Item',
    end_time: 'End Time',
    total_call: 'Total Call',
    'things with spaces':'Translates fine'
  };
  return hdrs.map((item) => translate[item] || "");
}

console.log(
  renameTableHdr([
    'name',
    'date',
    'start_time',
    'selling_item',
    'total_call',
    'end_time',
    'ad_num',
    'area',
    'order_num',
    'XXXXXXXXXXXXXXXXXXXXXXXXXX',
    'things with spaces',
  ]),
);

edited Dec 12, 2018 at 9:30

answered Dec 12, 2018 at 9:24

HMR

39.5k26 gold badges99 silver badges175 bronze badges

1 Comment

Eem Jee Over a year ago

Thanks for this man. Better and more efficient way. So time saving (phew)

Trung Duong · Accepted Answer · 2018-12-12 09:18:16Z

1

When removing item from an array, you should loop backward like this

   renameTableHdr(hdrs){
        var handler = hdrs;

        for(var a = hdrs.length - 1; a >= 0; a--){
            // ...
        }
    }

answered Dec 12, 2018 at 9:18

Trung Duong

3,4752 gold badges10 silver badges10 bronze badges

2 Comments

Eem Jee Over a year ago

@TrungDong Yes this solves my problem, but my indexing is now affected. I mean they are now in 9-0 indexing instead of 0-9.

Trung Duong Over a year ago

Instead of using push function, you could try to use this.tempTblHdr.unshift(itm);

Collectives™ on Stack Overflow

Removing an item from an array using index in vue JS returns an unexpected result

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related