Property ' name ' does not exist on type' [ ] '

Question

Im declaring the array IProducts within the property products Like its shown below.. But what is annoying me that they are not recongnizing that productName is declared ..Please I need a help

product-list.component.ts

filteredProducts: IProduct[];
products : IProduct[] = [{
        "productId": 2 ,
        "productName": "Garden Cart" ,
        "productCode": "GDN-0023" ,
        "releaseDate": "March 18,2018",
        "description":  " 15 gallon capacity rolling",
        "price" :   32.99,
        "starRating": 4.2,
        "imageUrl" : "http://openclipart.org/image/300px/sgv_to_png/58471/garden_cart.png",

    },
    {

        "productId": 5 ,
        "productName": "Hammer" ,
        "productCode": "TBX-0048" ,
        "releaseDate": "May 21,2016",
        "description":  " Curved claw steel Hammer",
        "price" :   8.9,
        "starRating": 4.8,
        "imageUrl" : "http://openclipart.org/image",


    }
] ;

constructor() {

  this.filteredProducts = this.products;
  this.listFilter = 'cart';
}

performFilter(filterBy: string): IProduct[]{
    filterBy =filterBy.toLocaleLowerCase();
    return this.products.filter((product: IProduct) =>
        this.products.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);
}

The terminal generates the following error : "src/app/products/product-list.component.ts(131,27): error TS2339: Property 'productName' does not exist on type 'IProduct[]'."

Answer 1

I'm going to go on a limb from what you are showing and say that this.products is an array of IProduct.

You are trying to access the property productName of an array, you need to specify which element of the array you want to access. Luckily you are already having access to a element in your filter function, so you can do

return this.products.filter((product: IProduct) =>
            product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);

Answer 2

you have issues in your syntax here is how to resolve this:

performFilter(filterBy: string): IProduct[]{
        filterBy =filterBy.toLocaleLowerCase();
        return this.products.filter((product: IProduct) =>
            product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1
    )}

Basically it iterates through the array where product: IProduct is an element of the array

Answer 3

IProduct must be a modal and productName must be a property in it.

or just use products: any instead of products: IProduct[]