I have a problem, I get the error "core.js:4196 ERROR TypeError: Cannot read properties of undefined (reading 'phones')"

The thing is that it tells me that the array of objects that I am going through is empty, when checking a little and doing debugging, I realize that it is not. That actually does not e indefinitely, the data is something big, yes, among 2800 data it brings you almost 5 or 6 phones (since those are what are registered)

Anyway, what I really want to do is get the phone numbers of "x" users from an object and do an autoplete filtering the data.

I leave you the code, maybe you see something that I don't:

.TS

  contactos: AddContacto[] = [];
  filteredContacts: Observable<AddContacto[]>;
  phoneControl: FormControl = new FormControl();

 this.filteredContactos = this.phoneControl.valueChanges.pipe(
      startWith(null),
      map((search: string | null) => (search ? this._filterContactos(search) : this.contactos.slice())),
    );

private _filterContactos(search: string) {
    const filterValue = search.toLowerCase();
    return this.contact.filter(
      (contact) =>
        !!contact.phones.find((email) => contact.includes(search)) ||
        contact.fullName.toLowerCase().includes(filterValue),
    );
  }

.HTML

<div class="containerTitle p-16">

                <mat-form-field fxFlex="100" class="mr-12" appearance="outline" fxFlex="100">
                    <mat-label>Search Client</mat-label>
                    <input type="text" placeholder="Add email..." matInput [formControl]="phoneControl" [matAutoplete]="auto">
                    <mat-autoplete #auto="matAutoplete" >
                        <mat-option *ngFor="contact of filteredContacts | async" [value]="contact.phones[0]">
                            {{contact?.phones[0]}} {{contact?.fullName ? '('+ contacto?.nombre_pleto +')' : ''}}
                        </mat-option>
                    </mat-autoplete>
                </mat-form-field>
                <small-loading class="loadingProgressBar" [loading]="loading"></small-loading>
            </div>

Object

0: {
    "state": true,
    "ents": null,
    "phones": ["22222222"],
    "emails": [
        "[email protected]"
    ],
    "fullName": "",
    "_id": "",
    "bitacora": {},
    "__v": 0
}

Thanks!!

I have a problem, I get the error "core.js:4196 ERROR TypeError: Cannot read properties of undefined (reading 'phones')"

The thing is that it tells me that the array of objects that I am going through is empty, when checking a little and doing debugging, I realize that it is not. That actually does not e indefinitely, the data is something big, yes, among 2800 data it brings you almost 5 or 6 phones (since those are what are registered)

Anyway, what I really want to do is get the phone numbers of "x" users from an object and do an autoplete filtering the data.

I leave you the code, maybe you see something that I don't:

.TS

  contactos: AddContacto[] = [];
  filteredContacts: Observable<AddContacto[]>;
  phoneControl: FormControl = new FormControl();

 this.filteredContactos = this.phoneControl.valueChanges.pipe(
      startWith(null),
      map((search: string | null) => (search ? this._filterContactos(search) : this.contactos.slice())),
    );

private _filterContactos(search: string) {
    const filterValue = search.toLowerCase();
    return this.contact.filter(
      (contact) =>
        !!contact.phones.find((email) => contact.includes(search)) ||
        contact.fullName.toLowerCase().includes(filterValue),
    );
  }

.HTML

<div class="containerTitle p-16">

                <mat-form-field fxFlex="100" class="mr-12" appearance="outline" fxFlex="100">
                    <mat-label>Search Client</mat-label>
                    <input type="text" placeholder="Add email..." matInput [formControl]="phoneControl" [matAutoplete]="auto">
                    <mat-autoplete #auto="matAutoplete" >
                        <mat-option *ngFor="contact of filteredContacts | async" [value]="contact.phones[0]">
                            {{contact?.phones[0]}} {{contact?.fullName ? '('+ contacto?.nombre_pleto +')' : ''}}
                        </mat-option>
                    </mat-autoplete>
                </mat-form-field>
                <small-loading class="loadingProgressBar" [loading]="loading"></small-loading>
            </div>

Object

0: {
    "state": true,
    "ents": null,
    "phones": ["22222222"],
    "emails": [
        "[email protected]"
    ],
    "fullName": "",
    "_id": "",
    "bitacora": {},
    "__v": 0
}

Thanks!!

• javascript
• angular
• typescript
• filter
• observable

• 2 Probably here but I don't really understand why : [value]="contact.phones[0]". I see later in the template that you handle the case where contact is undefined but not in this attribute. But given your data, contact should not be undefined anyway – Arnaud Denoyelle Commented Mar 22, 2022 at 16:45
• 1 contact could be undefined if it's rendering before the data has finished loading. Can't tell from this. – James Commented Mar 22, 2022 at 17:13

1 Answer 1

That error is because you are using an old version of typescript and it is necessary to check if the array exist and length is higher that 0 to use any array method like filter, find, foreach, etc.

Change this in your _filterContactos method.

private _filterContactos(search: string) {
    const filterValue = search.toLowerCase();
    return this.contact.filter(
      (contact) => {
        if (contact.phones && contact.phones.length > 0) {
          !!contact.phones.find((email) => contact.includes(search)) ||
           contact.fullName.toLowerCase().includes(filterValue)
        }
      }
        
    );
  }

Let me know if it worked for you.