Different Ways to Remove an Element from an Array in TypeScript

Question

Different Ways to Remove an Element from an Array in TypeScript

I have been browsing through the responses here, but none of them seem to work for me. I am trying to remove an item from an array, but no matter what I do, the index keeps returning as -1.

  deleteItinerary(id: string) {
    this.dataSvc.removeItinerary(id);
    console.log('id', id);
    const index = this.itineraries.indexOf(id);
    console.log('array', this.itineraries);
    console.log('index', index);
  }

I have read that using array.indexOf() should solve the issue. I am double-checking the id and confirming its presence in the array with console logs, but the index value continues to be -1.

Any assistance would be greatly appreciated. Thank you.

angular typescript ionic4

Answer 1

Answer №1

Each element in the provided array is an object with a property named id, which is of type string. To remove a specific element based on its id, you can simply utilize the Array.filter() method.

const data = [{id:'2'}, {id:'5'}, {id:'9'}];

const removeItinerary = (removeId) => {
  const res = data.filter(obj => obj.id !== removeId);
  return res;
}

console.log(removeItinerary('5'));

Using Array.splice() might not be suitable for this scenario unless you provide the index of the object you intend to remove.

If you still want to proceed with Array.splice(), first find the index of the object in the array that corresponds to the specified id.

const index = data.findIndex(obj => obj.id === removeId)

Then, apply Array.splice to eliminate the object from the array.

if (index > -1) {
  array.splice(index, 1);
}

const data = [{id:'2'}, {id:'5'}, {id:'9'}];

const removeItinerary = (removeId) => {
  const index = data.findIndex(el => el.id === '5')
  if (index > -1) {
    data.splice(index, 1);
  }
  return data;
}

console.log(removeItinerary('5'));

Answer 2

Each element in the provided array is an object with a property named id, which is of type string. To remove a specific element based on its id, you can simply utilize the Array.filter() method.

const data = [{id:'2'}, {id:'5'}, {id:'9'}];

const removeItinerary = (removeId) => {
  const res = data.filter(obj => obj.id !== removeId);
  return res;
}

console.log(removeItinerary('5'));

Using Array.splice() might not be suitable for this scenario unless you provide the index of the object you intend to remove.

If you still want to proceed with Array.splice(), first find the index of the object in the array that corresponds to the specified id.

const index = data.findIndex(obj => obj.id === removeId)

Then, apply Array.splice to eliminate the object from the array.

if (index > -1) {
  array.splice(index, 1);
}

const data = [{id:'2'}, {id:'5'}, {id:'9'}];

const removeItinerary = (removeId) => {
  const index = data.findIndex(el => el.id === '5')
  if (index > -1) {
    data.splice(index, 1);
  }
  return data;
}

console.log(removeItinerary('5'));

Different Ways to Remove an Element from an Array in TypeScript

Answer №1

Similar questions

Bootstrap flex: on a single row, one column spans the entire height while the other contains elements that are vertically aligned in the center

The CORS preflight request for OPTIONS method is returning a 401 (Unauthorized) response from a Windows Authenticated web API

Angular Pause until the variable is ready

Utilizing an object as a prop within React-router's Link functionality

Angular Universal experiences issues with route functionality after page reloads

Typescript Code Coverage with karma-jasmine and istanbul: A complete guide

Unable to access structuredClone on the global object within a Node.js application

Dependencies of generic types among function arguments

Creating descriptions for types in Vue.js using TypeScript

An error occurred: The property 'toUpperCase' cannot be read of an undefined Observable in an uncaught TypeError

Ensure that the tooltip remains visible within the confines of the page

Find with user-friendly input/label removal function (Ionic 2)

I have the ability to run a MEAN application on my local machine, however, I am facing issues when

Create a flexible string for refining a REST request

Tips for updating a session cookie in nestjs

Having trouble selecting all checkboxes in Angular

VIDEOJS ERROR: A peculiar mistake has occurred. TypeError: The property 'value' cannot be read since it is undefined in the context of

Uh-oh! Angular 6 has encountered an unexpected error with template parsing

Issue - Unrecognized listen EADDRINUSE :::5432 detected in Windows Command Prompt

Angular2 Dropdown Menu with Arrow Key Scrolling