Deleting an element in an Array of objects using Typescript

Question

Deleting an element in an Array of objects using Typescript

export class AppComponent implements OnInit {

  title = 'bucketList';
  bucketList: BucketListItem[] = [
    new BucketListItem(
      "Goa Trip",
      "Travel to Goa"
    )
  ];

  ngOnInit() {

  }
  onItemAdded(eventData) {
    this.bucketList.push(new BucketListItem(eventData.itemName, eventData.itemDescr));
  }
  onItemDeleted(delData) {   //delData = "Goa Trip"
    console.log(this.bucketList); //prints {"itemName":"Goa Trip","itemDescr":"Travel to Goa"
    this.bucketList = this.bucketList.filter(function (obj) {
      return obj.itemName !== delData;
    });
    console.log(this.bucketList);  //prints {"itemName":"Goa Trip","itemDescr":"Travel to Goa"
  }
}

The goal is to eliminate an element from the array by matching its itemName, specifically when itemName equals "Goa Trip". However, the removal process does not succeed.

javascript angular typescript

Answer 1

Answer №1

To ensure proper filtering, make sure to assign the value after applying the filter.

myBucketList = myBucketList.filter(function (item) {
      return item.name !== 'Goa Trip';
});
console.log(myBucketList);

Answer 2

To ensure proper filtering, make sure to assign the value after applying the filter.

myBucketList = myBucketList.filter(function (item) {
      return item.name !== 'Goa Trip';
});
console.log(myBucketList);

Answer 3

Answer №2

The problem lies in the setup of your BucketListItem object. Below is a simple example that demonstrates the issue:

class App {

    title = 'bucketList';
    bucketList = [
        {
            itemName: "Goa Trip",
            itemDescr: "Travel to Goa"
        }
    ];
    add(data) {
        this.bucketList.push([data.itemName, data.itemDescr]);
    }
    delete(delData) {   //delData = "Goa Trip"
        console.log(this.bucketList); //prints {"itemName":"Goa Trip","itemDescr":"Travel to Goa"
        this.bucketList = this.bucketList.filter(function (obj) {
            return obj.itemName !== delData;
        });
        console.log(this.bucketList);  //prints {"itemName":"Goa Trip","itemDescr":"Travel to Goa"
    }
}

After setting up the above code, you can execute the following commands:

const app = new App()
app.delete('Goa Trip')

It should work as intended. In your case, "itemName" is enclosed in double quotes, indicating that either the quotes are part of the property's literal name or it's JSON rather than a JavaScript object.

To resolve this, try the following:

this.bucketList = this.bucketList.filter(function (obj) {
    return obj['"itemName"'] !== delData;
});

If this change works, then the issue is due to the presence of double quotes in the item's literal name. If there is no property named itemName but instead "itemName", your filter method won't match anything.

Answer 4

The problem lies in the setup of your BucketListItem object. Below is a simple example that demonstrates the issue:

class App {

    title = 'bucketList';
    bucketList = [
        {
            itemName: "Goa Trip",
            itemDescr: "Travel to Goa"
        }
    ];
    add(data) {
        this.bucketList.push([data.itemName, data.itemDescr]);
    }
    delete(delData) {   //delData = "Goa Trip"
        console.log(this.bucketList); //prints {"itemName":"Goa Trip","itemDescr":"Travel to Goa"
        this.bucketList = this.bucketList.filter(function (obj) {
            return obj.itemName !== delData;
        });
        console.log(this.bucketList);  //prints {"itemName":"Goa Trip","itemDescr":"Travel to Goa"
    }
}

After setting up the above code, you can execute the following commands:

const app = new App()
app.delete('Goa Trip')

It should work as intended. In your case, "itemName" is enclosed in double quotes, indicating that either the quotes are part of the property's literal name or it's JSON rather than a JavaScript object.

To resolve this, try the following:

this.bucketList = this.bucketList.filter(function (obj) {
    return obj['"itemName"'] !== delData;
});

If this change works, then the issue is due to the presence of double quotes in the item's literal name. If there is no property named itemName but instead "itemName", your filter method won't match anything.

Answer 5

Answer №3

After some investigation, I identified the issue as being caused by extra spaces before and after the itemName. To rectify this, I implemented the javascript trim() function and now the problem has been resolved successfully.

Answer 6

After some investigation, I identified the issue as being caused by extra spaces before and after the itemName. To rectify this, I implemented the javascript trim() function and now the problem has been resolved successfully.

Deleting an element in an Array of objects using Typescript

Answer №1

Answer №2

Answer №3

Similar questions

Issue with generating random cells in a table using a loop

AngularJS presents an error: [ng:areq] The argument 'myAppCtrl' is not recognized as a function, as it returns undefined while implementing routes with ngRoute and $routeProvider

Implementing Server-Side API Response Caching in React-Query and Next JS

Why won't NextJS Image elements render on iOS 16 when they are not in the viewport initially?

Issue with rendering HTML entities in Material UI when passing as props

An Angular ng-container situated within a row of an HTML table

When attempting to perform conditional rendering in React using a stateless functional component, I encounter an error stating "Unexpected token, expected ,"

Establish a connection using node.js to enable communication between a server and a client

Is condition checking taken into consideration by Typescript?

Utilizing Typescript to Incorporate Bable's Latest Feature: The 'Pipeline Operator'

Wait for response after clicking the button in Vue before proceeding

Issues with my transpiled and typed TypeScript npm module: How can I effectively use it in a TypeScript project?

Retrieving data from the database using getStaticProps in Next.js

Avoiding duplication of prints in EJS template files

Switching perspective in express with Pug

Attempting to enhance the modularity and readability of my code

JavaScript validation code for verifying hostnames with a specified domain name

Utilize Node.js to proxy Angular requests to a service hosted on Azurewebsites

"Receive your share of the catch in a pop-up notification

Determine the quantity within the data array using javascript