What is the best way to remove an element from an array and add a new one?

Question

What is the best way to remove an element from an array and add a new one?

Here is the array that I am working with:

 [
  {
   "id": "z12",
   "val": "lu",
   "val2": "1",
  },
  {
   "id": "z13",
   "val": "la",
   "val2": "2",
  },
  {
   "id": "z14",
   "val": "lo",
   "val2": "3",
  },
]

Additionally, I have a second array called array2 which looks like this:

    array2 = {
      tab: [],
    }

In my TypeScript code, I perform the following operation on the arrays:

   array.forEach((item, index)=>{
    if(item.id === z12){
      array.splice(index, 1);
    }else{
      array2.tab.push(item.id);
    }
});

The expected result should be having tab: [z13,z14], however it is not producing the desired outcome.

javascript typescript lodash

Answer 1

Answer №1

You can perform filtering and mapping operations directly on arrays in JavaScript.

const data = [{ "id": "z12", "val": "lu", "val2": "1", }, { "id": "z13", "val": "la", "val2": "2", }, { "id": "z14", "val": "lo", "val2": "3", },];

const newData = {
  modifiedArray: data.filter(item => item['id'] != "z12").map(item => item['id']),
}

console.log(newData)

Answer 2

You can perform filtering and mapping operations directly on arrays in JavaScript.

const data = [{ "id": "z12", "val": "lu", "val2": "1", }, { "id": "z13", "val": "la", "val2": "2", }, { "id": "z14", "val": "lo", "val2": "3", },];

const newData = {
  modifiedArray: data.filter(item => item['id'] != "z12").map(item => item['id']),
}

console.log(newData)

Answer 3

Answer №2

To achieve this, you might consider breaking it down into two separate steps:

// Begin by filtering out the element with id 'z12' as per your request
array = array.filter(item => item.id !== 'z12')

// Then create a new object containing only the remaining ids
remainingIds = {
  tab: array.map(item => item.id)
}

Answer 4

To achieve this, you might consider breaking it down into two separate steps:

// Begin by filtering out the element with id 'z12' as per your request
array = array.filter(item => item.id !== 'z12')

// Then create a new object containing only the remaining ids
remainingIds = {
  tab: array.map(item => item.id)
}

Answer 5

Answer №3

Using the splice() method within a forEach() loop can lead to unexpected issues. In a scenario where "z12" is removed from an array, the resulting array will look like this:

 [
  {
   "id": "z13",
   "val": "la",
   "val2": "2",
  },
  {
   "id": "z14",
   "val": "lo",
   "val2": "3",
  },
]

However, it's important to note that the iteration of the forEach method does not automatically stop itself. It will continue with index 1 right after "z12" was removed, making the item at index 1 now refer to "z14" instead of "z13".

If you want to learn more about best practices for using forEach, check out this video: Why forEach is BAD!

Answer 6

Using the splice() method within a forEach() loop can lead to unexpected issues. In a scenario where "z12" is removed from an array, the resulting array will look like this:

 [
  {
   "id": "z13",
   "val": "la",
   "val2": "2",
  },
  {
   "id": "z14",
   "val": "lo",
   "val2": "3",
  },
]

However, it's important to note that the iteration of the forEach method does not automatically stop itself. It will continue with index 1 right after "z12" was removed, making the item at index 1 now refer to "z14" instead of "z13".

If you want to learn more about best practices for using forEach, check out this video: Why forEach is BAD!

What is the best way to remove an element from an array and add a new one?

Answer №1

Answer №2

Answer №3

Similar questions

Passing a callback to a third-party library resulted in an unexpected error

Accessing clipboard contents upon button click using TypeScript

switch the anchor tag value and send it along with the URL

The margin persists despite the usage of the * selector and !important declaration

waiting for udp response in node.js using express

Utilizing HTTPS for OpenWeatherMap API in JavaScript encounters obstruction

Exploring a one-dimensional nested array in order to make updates to the higher level nodes

Using JSDoc and Visual Studio Code: Writing documentation for a function that is being passed as an argument to another

Utilizing Selenium Webdriver to efficiently scroll through a webpage with AJAX-loaded content

Issues with Vue enter transitions not functioning as expected

An issue occurred while attempting to utilize fs.readFileSync

What steps can I take to prompt a ZMQ Router to throw an error when it is occupied?

The jQuery autocomplete feature with typeahead suggestions fails to appear following a successful AJAX request

Organize your blog content by utilizing post IDs as the designated id attribute

Initially, when fetching data in React, it may return as 'undefined'

What is the purpose of parsing my array if they appear identical in the console?

Automate the process of triggering the "Organize Imports" command on a VSCode / Typescript project through code

The additional pieces of information transmitted in the state are not being accurately interpreted

Retrieve the most recently added child from the Firebase cloud function

Adjusting the placement in Draw2D