When you try to remove an element from an array by its index in Vue JS, the outcome may not be

Question

When you try to remove an element from an array by its index in Vue JS, the outcome may not be

Here is an array that I have:

var hdr = ("name", "date", "start_time", "selling_item", "total_call", 
           "end_time", "ad_num", "area", "order_num");
//this data comes from the database

Now, I need to rename these array elements according to proper naming conventions. So, this is my approach:

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";
            }
            //and so on for all other elements

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

When I don't use splice, the output seems correct as expected. However, when I use splice, it does not work properly.

Output without using splice

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

Using Splice

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

I'm removing certain items from handler to ensure they are in the correct naming convention. The intention is to rename them without altering their indexes. Am I correctly implementing the splice method here?

javascript arrays vue.js array-splice

Answer 1

Answer №1

If you want to remove an item from an array, it is recommended to do it in reverse order. This is because the index of the items in the array keeps changing even after deletion.

For example:

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

During the first iteration, when i is 0, it removes "a". In the second iteration, with i as 1, it skips "b" and removes "c". On the third iteration, since the array is now ["b", "d"], it stops before removing anything else.

To avoid skipping elements when removing items, go through the array in reverse order. Make sure to add new items using unshift method for proper indexing:

renameTableHdr(hdrs){
    var handler = hdrs;

    for(var a = hdrs.length-1; a>=0; a--){
      // Logic for renaming headers
      if logic condition{
        // Rename header item
      }
      
      // Removing item from array
      if(handler.indexOf(hdrs[a]) >= 0){
        handler.splice(handler.indexOf(hdrs[a]),1);
      }
      this.tempTblHdr.unshift(itm);
    }
},

Answer 2

If you want to remove an item from an array, it is recommended to do it in reverse order. This is because the index of the items in the array keeps changing even after deletion.

For example:

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

During the first iteration, when i is 0, it removes "a". In the second iteration, with i as 1, it skips "b" and removes "c". On the third iteration, since the array is now ["b", "d"], it stops before removing anything else.

To avoid skipping elements when removing items, go through the array in reverse order. Make sure to add new items using unshift method for proper indexing:

renameTableHdr(hdrs){
    var handler = hdrs;

    for(var a = hdrs.length-1; a>=0; a--){
      // Logic for renaming headers
      if logic condition{
        // Rename header item
      }
      
      // Removing item from array
      if(handler.indexOf(hdrs[a]) >= 0){
        handler.splice(handler.indexOf(hdrs[a]),1);
      }
      this.tempTblHdr.unshift(itm);
    }
},

Answer 3

Answer №2

One approach to simplifying the translation without using for loops or mutating the data is as follows:

function translateHeaders(headers) {
  const translations = {
    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 headers.map((header) => translations[header] || "");
}

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

Answer 4

One approach to simplifying the translation without using for loops or mutating the data is as follows:

function translateHeaders(headers) {
  const translations = {
    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 headers.map((header) => translations[header] || "");
}

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

Answer 5

Answer №3

It is important to iterate backwards when removing an item from an array, as shown in the code example below:

   removeItemFromArray(items){
        var arr = items;

        for(var i = items.length - 1; i >= 0; i--){
            // Code logic for removing item
        }
    }

Answer 6

It is important to iterate backwards when removing an item from an array, as shown in the code example below:

   removeItemFromArray(items){
        var arr = items;

        for(var i = items.length - 1; i >= 0; i--){
            // Code logic for removing item
        }
    }

When you try to remove an element from an array by its index in Vue JS, the outcome may not be

Answer №1

Answer №2

Answer №3

Similar questions

Changing an Array into JSON format using AngularJS

res.send No data being transmitted - in the realm of Express.js

How can I use an API in Vue to rearrange the order of an array?

Efficient initialization process in Vue.js components

Why isn't P5.JS's .display() working like it should?

Retrieve all direct message channels in Discord using DiscordJS

Make sure the inputs in separate table data cells are lined up in

The amazingly efficient Chrome quick find feature, accessible by pressing the powerful combination of Ctrl + F, ingeniously

When using React hooks forms, setting default values from a reduced array does not automatically populate the form. However, manually entering the same object into the form does

Troubleshooting Issue: XMLHttpRequest Incompatibility with Internet Explorer

The height of the Material UI Paper component is not appropriately matched with the parent component

Node js Express js token authentication: unraveling the implementation complexities

One can only iterate through the type 'HTMLCollection' by utilizing the '--downlevelIteration' flag or setting a '--target' of 'es2015' or above

Steps to remove the smallest number from an array: if there are multiple smallest numbers, remove the first one

Issue with mediaelement in Angular 8: video playback does not display after 2 seconds

Troubleshooting JavaScript Oscilloscope: resolving audio playback problems

Toggle the active class on the parent element when it is clicked

"Utilizing Axios to convey JSON data into Vue Js: A Step-by-Step Guide

Using SCSS variables in TypeScript inside a Vue project

Issue: Error occurs when using _.sample on an array containing nested arrays