Guide to effectively changing the value of an index within an array using JavaScript

Question

Guide to effectively changing the value of an index within an array using JavaScript

The following code successfully updates the values of a specific index in an array:


var pushTest = false

if(this.forUpdate.length == 0){
   this.forUpdate.push(value);
}else{
   for(var i=0;i<this.forUpdate.length;i++){
   //check if the value id is existing in the array
       if(value.item.id == this.forUpdate[i].item.id){
           this.forUpdate.splice(this.forUpdate.indexOf(i), 1);
           this.forUpdate.push(value);
           pushTest = true
        }
    }
    if(pushTest == false && this.forUpdate.length > 0){
       this.forUpdate.push(value);
    }
}

Observations:

First update

https://i.sstatic.net/IaWfD.png

Second update (same id as first update)

https://i.sstatic.net/Lf1z6.png

Third update (different id)

https://i.sstatic.net/1REw1.png

Everything seems to be working well, but upon updating again with id 1, all items with id 61 disappear from the array. The array only contains items with id 1 after the update. I want the updated item with id 1 to be included along with items having both id 1 and id 61 in the array. What am I missing here?

javascript arrays

Answer 1

Answer №1

let replaceItem = false;
forUpdates.forEach((element, index) => {
  if (element.item.id === value.item.id) {
    forUpdates[index] = element;
    replaceItem = true;
  }
});
if (!replaceItem) forUpdates.push(value);

An issue you may encounter is modifying the array while iterating through it. This results in the variable maintaining its value even after adding a new item to the array. One way to address this problem is to avoid directly mutating arrays (which my method does not entirely prevent either). To prevent mutations, consider creating a new array every time you need to update it and copying over the necessary values.

Answer 2

let replaceItem = false;
forUpdates.forEach((element, index) => {
  if (element.item.id === value.item.id) {
    forUpdates[index] = element;
    replaceItem = true;
  }
});
if (!replaceItem) forUpdates.push(value);

An issue you may encounter is modifying the array while iterating through it. This results in the variable maintaining its value even after adding a new item to the array. One way to address this problem is to avoid directly mutating arrays (which my method does not entirely prevent either). To prevent mutations, consider creating a new array every time you need to update it and copying over the necessary values.

Guide to effectively changing the value of an index within an array using JavaScript

Answer №1

Similar questions

Learning how to use arrow functions with the `subscribe` function in

Error alert: The reference to emailjs is not recognized in the onsubmit function of HTMLFormElement

Sending numerous arrays to MongoDB through a Post route in NodeJS

What is the best way to implement complex input filtering in JavaScript?

How to Limit the Number of Rows in a Vue.js Bootstrap Table

Converting simplex noise values into a vibrant spectrum of colors

swapping out an external CSS file in React for a new CSS file

Experiencing difficulties with my image slider and struggling to determine the cause

Is there a way to set a default value for the map function?

Major Technical Issues Plague School-wide Celebration

Row within a table displaying link-like behavior

How to message someone privately in a public Discord channel using discord.js

The Bootstrap Datepicker is always set to display a date that is one day earlier than the selected date

Anagram Game with 2 Arrays

Mongoose Error: The function 'mongooseSchemahere' is not recognized as a valid function

What steps are needed to fetch aggregated data from mongodb and present it in ejs?

the message sent from a webpage to a Chrome extension using chrome.runtime.sendMessage does not receive

Navigate through the page and once you reach a specific point, scroll the element

Is my Magento journey on the correct course?

When I use AJAX to load a PHP file, the function's content returns as [object HTMLDivElement]