Angular 4 not throwing errors when using Array.Filter and find

Having trouble filtering a list using Array.find and filter functions.

Here is the function in question: 

 setSupplierDetails(supplierId) {
const supplier = this.suppliers.filter(tempSupplier => tempSupplier.id === supplierId)[0];
this.supplierName = supplier.supplierName;

} Encountered Error : 

ERROR TypeError: Cannot read property 'filter' of undefined
    at AddEditRestockComponent.webpackJsonp.../../../../../src/app/restock/add-edit-restock/add-edit-restock.component.ts.AddEditRestockComponent.setProductRelatedInfo
angulartypescript

Answer №1

One common issue arises when an array is not properly initialized, which can be resolved by initializing the array correctly.

suppliersList: SomeClass[] = [];

Within a method:

setSupplierDetails(supplierId) {
if(this.suppliersList && this.suppliersList.length > 0){
const selectedSupplier = this.suppliersList.filter(tempSupplier => tempSupplier.id === supplierId)[0];
}

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

Tips for utilizing import alongside require in Javascript/Typescript

In my file named index.ts, I have the following code snippet: const start = () => {...} Now, in another file called app.ts, the code is as follows: const dotenv = require('dotenv'); dotenv.config(); const express = require('express' ...

javascriptnode.jstypescriptexpress

An issue arises when using an Observable in the model while employing Angular's dynamic component loading

I have been utilizing a dynamic component for quite some time now. However, I am now interested in incorporating an "Observable" into its model to enable triggering changes from external sources. To achieve this, I have created a service (which lies outsid ...

angular

How can I import multiple variables in TypeScript?

I have a React application built with TypeScript, and my project directory is structured as follows: App.tsx /pages Page1.tsx The contents of Page1.tsx are shown below: Page1.tsx class PageParams { constructor() { } } class Page1 { co ...

reactjstypescript

Why does the method of type assigning vary between actual and generic types?

There are no errors in the code shown below: type C = {b: string}; class Class { data: C; constructor(data: C) { this.data = data; } test() { const hack: C & {a?: any} = this.data; //no error } } However, when a g ...

typescript

Is it not possible to reinitialize angular/material's md-slide-toggle component?

In my Angular 2 application, I have a model-driven form that consists of two components: An Angular Material slide-toggle. A button that triggers the onReset(form: FormGroup) function in my Component when clicked. You can view an example on this Plunkr. ...

angularangular-material

Implementing Bootstrap 4 in an Angular 9 project without the use of JQuery

Currently, I am actively working on detaching all JQuery dependencies within my Angular project. Most of the dependencies stem from utilizing Bootstrap 4 components. Eliminating dropdowns and removing all instances of data-*** seemed to help in this proc ...

jqueryangular

Send an object containing client values to the parent component upon initialization in Angular

I am trying to pass a set of values to the parent component when a child component is loaded. However, I seem to be having trouble with this process. Any assistance or guidance on what might be going wrong would be highly appreciated. Here is the "data cl ...

angularparent-child

Navigate to the middle of a DIV container in Angular 7

Is there a way to programmatically scroll to the center of my element on both the Y and X axes when a specific function is executed? My HTML structure includes the following (I am aiming to scroll to the middle of #viewport): </div> <div # ...

javascripthtmlcssangular

Tips on changing the date format in Typescript to the desired format

My date string reads as 2016-09-19T18:10:31+0100. Here's what I'm doing: let dateString:string = 2016-09-19T18:10:31+0100; let newDateString:Date = new Date(dateString); The output I'm currently getting is Tue Sep 19 2016 18:10:31 GMT+0530 ...

angulardatetimetypescript

Loading screen displayed while transitioning between routes within Angular

I have been struggling to implement a loading spinner in my project. How can I display a loading screen when changing routes in Angular? Here is the HTML code snippet: <div *ngIf="showLoadingIndicator" class="spinner"></div> ...

cssangulartypescript

Converting an array of object values to an Interface type in Typescript

In my JSON document, I have an array named dealers that consists of various dealer objects like the examples below: "dealers" : [ { "name" : "BMW Dealer", "country" : "Belgium", "code" : "123" }, { "name" : ...

javascripttypescript

Angular 4 with Typescript allows for the quick and easy deletion of multiple selected rows

I am currently working on an application where I need to create a function that will delete the selected checkboxes from an array. I have managed to log the number of checkboxes that are selected, but I am struggling to retrieve the index numbers of these ...

javascriptangulartypescript

Confirm the object received from the API and assign default values

Seeking to extract data from an API and verify if all fields are strings, but if they are missing I aim to assign default values. My intention was to utilize the yup library to validate the object accordingly, ensuring that the returned function is prope ...

javascripttypescriptvalidationtypesyup

Retrieving images in Angular 2 from a file upload process

Hello in my Angular 2 application I am integrating ng2-file-upload library for file uploading: <input type="file" ng2FileSelect [uploader]="uploader" multiple (change)="onChange($event)"> I am interested in creating an instance of an image object ...

angularng2-bootstrap

Troubleshooting typescript error in styled-components related to Material-UI component

When using typescript and trying to style Material UI components with styled-components, encountering a type error with StyledComponent displaying Type '{ children: string; }' is missing the following properties import React, { PureComponent } f ...

reactjstypescriptmaterial-uistyled-components

Require a property to be mandatory depending on the value of another property within a generic interface

Looking for a way to have one property affect the others in a react component interface? Here's an example of what I'm trying to achieve: export interface IMyAwesomeComponentProps<T = {}> { className: string defaultPath?: ISomeOthe ...

reactjstypescript

Angular page startup triggers NPM, leading to a sudden crash

Our ASP.Net + Angular web pages running on the IIS server (built with .Net Core 2.1 and Angular5) have suddenly stopped functioning. An error message "AggregateException: One or more errors occurred. (One or more errors occurred. (The NPM script 'sta ...

asp.netnode.jsangulariis

Issue with Angular4: Unable to select [selected] attribute on initial load

Here is a code snippet to select a department: <select name="department" class="form-control select" [(ngModel)]="departments" formControlName="departmentControl"> <option *ngFor="let department of departments" [ngValue]="department" [se ...

angularangular4-forms

Error: Local variable remains undefined following an HTTP request

Whenever I make http calls, my goal is to store the received JSON data in a local variable within my component and then showcase it in the view. Service: getCases(){ return this.http.get('someUrl') .map((res: Response) => res.jso ...

httpangulartypescript

Retrieve the value within the finalize pipe from a test execution

I have a component with the following code: isLoading: boolean; users: User[]; test: number = 1; ngOnInit() { this.isLoading = true; this.userService.getUsers() .pipe( finalize(() => { // Disable loading when complete ...

angulartestingjasmine