Cannot read property 'filter' of undefined Array in Angular

Question

I'm having an array customerList: Array<String> = []; and a function which pushes the value from server into this array. It's working fine except when i use .filter() on this array it gives me undefined error. This code is:

customerList: Array<String> = [];

ngOnInit() {
this.customerService.getCustomers().subscribe(res => {
    this.customers = res;
    for (const cust of res) {
      this.customerList.push(cust.first_name);
    }
  }
);
}

findChoices(searchText: string) {
return this.customerList.filter(item =>
  item.toLowerCase().includes(searchText.toLowerCase())
  ); 
 );
}

HTML Code:

<mwl-text-input-autocomplete-container>
  <input type="text" class="form-control" id="customer_name" name="customer_name" aria-describedby="emailHelp"
                 placeholder="Customer name" formControlName="customer_name" mwlTextInputAutocomplete
                 [findChoices]="findChoices"
                 [getChoiceLabel]="getChoiceLabel" autofocus>
</mwl-text-input-autocomplete-container>

The customerList.filter() in findChoices() is giving the error.

P.S.- I'm using this package

Can you add console.log(this.customerList) to the start of findChoices, and add the output to this question please? — user184994
– user184994, Commented Aug 4, 2018 at 18:11
@user184994 it's undefined there, but on ngonInit() it is displaying the data — Isurendrasingh
– Isurendrasingh, Commented Aug 4, 2018 at 18:16
Where are you calling findChoices from? Can you add that code as well please? — user184994
– user184994, Commented Aug 4, 2018 at 18:17
Okay, and if you console.log(this) from inside that function, does it print the name of your component? — user184994
– user184994, Commented Aug 4, 2018 at 18:24

Wand Maker · Accepted Answer · 2018-08-04 18:58:21Z

4

Since you are passing function object findChoices as value to [findChoices], the value of this will not be bound to your component, and hence this.customerList will be undefined.

You can make use of closure to ensure customerList is visible to [findChoices] by following below steps:

Change findChoices implementation to return a function that can be used as value of [findChoices] - that is a function that accepts a string parameter.
```
findChoicesIn(list) {
  return (searchText) => 
          list.filter(item => item.toLowerCase().includes(searchText.toLowerCase()));
};
```
Use the function thus generated as value of [findChoices]
```
[findChoices]="findChoicesIn(customerList)"
```

edited Aug 4, 2018 at 18:58

answered Aug 4, 2018 at 18:52

Wand Maker

18.8k9 gold badges58 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Isurendrasingh Over a year ago

Working!! Thanks

João Marcos Santos Teixeira Over a year ago

Fine Tanks Wand!

Sajeetharan · Accepted Answer · 2018-08-04 18:28:07Z

0

Seams your customerList is empty or null, just add a check

if(this.customerList && this.customerList.length > 0){
  return this.customerList.filter(item =>
  item.toLowerCase().includes(searchText.toLowerCase())
  ); 
}

edited Aug 4, 2018 at 18:28

answered Aug 4, 2018 at 18:11

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

6 Comments

Isurendrasingh Over a year ago

it is still undefined.

Sajeetharan Over a year ago

you need to pass the search filter

user184994 Over a year ago

@Sajeetharan Actually OP is passing a reference to the function, not invoking the function

Sajeetharan Over a year ago

@user184994 yeah right! it cant be undefined once it holds the value

Isurendrasingh Over a year ago

@Sajeetharan how to pass the search filter?

|

Collectives™ on Stack Overflow

Cannot read property 'filter' of undefined Array in Angular

2 Answers 2

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related