Search for specific item within an array of objects

Working on an Angular project, I am attempting to remove an object from an array. To achieve this, I need to filter the array and then update the storage (specifically, capacitor/storage) with the modified array.

Here is my function:

deleteArticle(id: string): void {
this.order = this.order[0].filter(p => p.products.productKey !== id);

}

order: Order; ==>

export interface OrderProduct {
  productKey: string;
  productName: string;
  price: number;
}
export interface Order {
  key?: string;
  customerKey: string;
  products: OrderProduct[];
  country?: string;
  city?: string;
  postcode?: string;
  addressLine?: string;
  creationDate?: any; //date
}

When the button is clicked in the HTML:

<ion-col>
    <ion-button (click)="deleteArticle(p.productKey)">
      <ion-icon name="trash-outline"></ion-icon>
    </ion-button>
  </ion-col>

After clicking the button, the array looks as expected, with the correct ID for filtering. However, an error keeps occurring:

Cannot read properties of undefined (reading 'filter')

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

Answer №1

When dealing with an order that is defined as Order in your code, attempting to access this.order[0].filter... may lead to errors. This is because you are trying to access a property named '0' (as in zero) of the order object, which is likely undefined and does not have a filter method. Based on the information provided, removing the '[0]' may resolve the issue. However, without additional code context, this suggestion is just a speculation.

Answer №2

After some investigation, I finally cracked the code - turns out it was just a data type issue!

All I had to do was include the products in this.order...

async removeItem(id: string): Promise<void> {
    this.order.products = this.order.products.filter(p => p.productKey !== id);
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

While observing a camera in motion, the particles tinted by texture display sporadic flickering on WebGL and Three.js

Check out this jsfiddle I created to illustrate an issue with particles "flickering" when colored using a texture and the camera is moving. Update: The problem occurs even when there is no animation or movement on the particles. If you notice flickering o ...

What is the best way to prevent a folder from being included in the next js build process while still allowing

I am faced with a challenge involving a collection of JSON files in a folder. I need to prevent this folder from being included in the build process as it would inflate the size of the build. However, I still require access to the data stored in these file ...

Achieving a single anchor link to smoothly scroll to two distinct sections within a single page using React

There is a sidebar section alongside a content section. The sidebar contains anchor links that, when clicked, make the corresponding content scroll to the top on the right-hand side. However, I also want the sidebar link that was clicked to scroll to the ...

onsubmit function was never triggered

Seems like a silly mistake, but I'm encountering an issue with my HTML form. Here's a snippet of the code: <form onsubmit="updateProfile();"> <input type="submit" value="Update Account"> .. ... </form> However, w ...

Modifying the CSS properties of elements with identical IDs

Encountering an issue while attempting to modify the CSS property of elements with similar IDs using JavaScript. Currently, running a PHP loop through hidden elements with IDs such as imgstat_1, imgstat_2, and so forth. Here is the code snippet being emp ...

Comparing XDomainRequest and XMLHTTPRequest - which one to choose

Our team is currently developing an application utilizing PixiJS that integrates a dynamic json loader. The .json files are loaded using the following logic: if(window.XDomainRequest) { this.ajaxRequest = new window.XDomainRequest(); } else if (windo ...

Develop a structured type that encompasses the stationary attributes of an object-oriented class

Provided are the following classes: class EnumerationDTO { designation: string; id: number; } class ExecutionStatusDTO extends EnumerationDTO { static readonly open: ExecutionStatusDTO = { id: 0, designation: 'Open' }; static readonl ...

Ensure that dynamic functions are accurately typed within a proxy utilizing TypeScript

I am currently working on a unique function that utilizes a Proxy with a get trap to extract functions from multiple objects. The challenge I am facing is getting TypeScript to recognize these functions at compile time so that I can add them to my interfac ...

Google Maps Circle Radius Functionality Malfunctioning

I've been trying to implement a map scaling feature using a slider in my code but I'm having trouble getting it to work. While the map is displaying correctly, the radius won't update as intended. Any assistance with this would be greatly ap ...

Using JSDoc to Include TypeScript Definitions

I've been attempting to utilize the ts-xor package, which provides a TypeScript definition: export declare type XOR<T, U> = (T | U) extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U; This is how I'm imp ...

Implementing a jQuery change event to filter a specific table is resulting in filtering every table displayed on the page

I have implemented a change event to filter a table on my webpage, but I am noticing that it is affecting every table on the page instead of just the intended one. Below is the code snippet: <script> $('#inputFilter').change(function() { ...

The button's status changes to disabled until I click outside the input field in Angular

I am currently facing an issue with a form (heat index calculator) that requires 2 inputs - a dropdown and a button. The button is disabled when there are no inputs or if the inputs are invalid. Everything works correctly, except for the fact that even whe ...

Understanding how objects are created using the reduce method

I'm curious about how the reduce function can transform an array into an object as shown in this example, particularly with the line: p[c[0]] = c[1]; Is this an unconventional syntax for creating key-value pairs that I haven't encountered before ...

What is the proper method for adding a file to formData prior to sending it to the server using a

I came across this tutorial on FormData, but I'm still trying to grasp how the formData object functions. Input Form Example: https://i.stack.imgur.com/h5Ubz.png <input type="file" id="file-id" class="w300px rounded4px" name="file" placeholder=" ...

Direction of Scrolling

Is it possible to have a div move in the opposite direction of mouse scroll, from the top right corner to the bottom left corner? Currently, it is moving from the bottom left to the top right. #block { position: absolute; top: 400px; left: 100px; < ...

Angular2 recursive template navigation

Is it possible to create a recursive template in Angular 2 without using ng-include? It's puzzling why this feature seems to be missing in Angular 2... HTML: <div ng-app="app" ng-controller='AppCtrl'> <script type="text/ng-templat ...

The functionality of the back button in a JavaScript website only allows users to navigate through their browsing

I'm currently experiencing an issue with the back navigation button on my one-page website. When I load a new page, I use the following code snippet: displayPage = function (page, json) { var stateObj = { "page": page, 'json': j ...

Implementing a transition to activate upon data loading in a Vue.js component – here's how!

Currently, I am immersed in a project utilizing vue.js and vue-router. Within my Vue application, I have a section dedicated to displaying news fetched from an API that functions as a blog. To load this news data into the component, I am utilizing the rou ...

Looking for a pattern that combines Browserify and Angular?

Currently, I am embarking on a project using angular and browserify for the first time. I am seeking advice on how to properly utilize the require function with browserify. There are multiple ways to import files, but so far, I have experimented with the ...

Retrieve data from Ionic storage

Need help with Ionic storage value retrieval. Why is GET2 executing before storage.get? My brain needs a tune-up, please assist. public storageGet(key: string){ var uid = 0; this.storage.get(key).then((val) => { console.log('GET1: ' + key + ...