Strange Behaviour of AutoComplete

Topic: Strange Behaviour of AutoComplete

1P3Cmdb pro asked 6 years ago

Good day guys,I have an error when trying to use a autocomplete component.

TypeError: Cannot read property 'toString' of undefined

This happens when typing into the box, usually it just pops open the suggestions, here is how I setup the component :

<mdb-completer [label]="ProjectOwner" id="ProjectOwner" name="ProjectOwner" [(ngModel)]="prjOwner" [datasource]="names" [minSearchLength]="3"></mdb-completer>

The datasource is of type Array<string>, and this very same component worked last time I was working on the program, i suspect the new version of MDBBootstrap broke something?

I have about 10 more autocomplete components on the same page, using different sources and its only this one and 2 others that wont work (same error).

I believe the error originates from base-data.service.ts on line 84 where toString is used twice ( I think it errors on the first instance of toString )

If anyone could help that would be great, thanks!
( let me know if more information is required )

Damian Gemza staff commented 6 years ago

Dear 1P3Cmdb, Could you paste me here your .ts code for autocompleter which produces you an error? It would help me debug your problem. Best Regards, Damian

1P3Cmdb pro commented 6 years ago

Here is the full error : TypeError: Cannot read property 'toString' of undefined at eval (base-data.service.ts:84) at Array.some () at eval (base-data.service.ts:84) at Array.filter () at LocalData.CompleterBaseData.extractMatches (base-data.service.ts:81) at LocalData.search (local-data.service.ts:38) at MdbListDirective.searchTimerComplete (list-context.directive.ts:168) at SafeSubscriber.eval [as _next] (list-context.directive.ts:122) at SafeSubscriber.__tryOrUnsub (Subscriber.js:243) at SafeSubscriber.next (Subscriber.js:190) as for the .ts code for the autocomplete, there isn't any specific code for it other than defining the data source as Array<string> and using it with the component in the HTML

Please insert min. 15 characters.

1P3Cmdb pro commented 6 years ago

when using the .ts code from the site the html looks like this : <mdb-completer [label]="ProjectOwner" id="ProjectOwner" name="ProjectOwner" [(ngModel)]="prjOwner" [datasource]="employeeCompleterService" [minSearchLength]="3"></mdb-completer> and the code looks like this : protected employeeCompleterService: CompleterData; names : Array<string>; constructor(private completerService: CompleterService){ names = new Array<string>(); this.employeeCompleterService = completerService.local(this.names); } later in the code the names array gets populated with items.

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear <a href="https://mdbootstrap.com/support/?user=1P3Cmdb">1P3Cmdb,</a>

I've tried to reproduce your error using provided code, but for me everything is working fine.

Here's the code:

.html:
<div>
<pre><div class="row">

<divclass="col-md-6 mx-auto my-5">

<mdb-completer [label]="ProjectOwner"id="ProjectOwner"name="ProjectOwner" [(ngModel)]="prjOwner" [datasource]="employeeCompleterService" [minSearchLength]="3"></mdb-completer>

</div>

</div></pre>
</div>
.ts:
<div>
<pre>protected searchStr:string;

protected employeeCompleterService: CompleterData;

names: Array<string>;

protected searchData= [ ];

constructor(private completerService: CompleterService) {

this.names = newArray<string>();

this.employeeCompleterService = completerService.local(this.names);

}

ngOnInit() {

}

ngAfterViewInit() {

setTimeout(() => {

this.names.push('yellow', 'black', 'red');

}, 3000);

}</pre>
</div>

In which scenario your names array are being populated with items? I'm doing this in setTimeout() in ngAfterViewInit() lifecycle.

I'm able to type something into input area, the dropdown is showing correctly, i'm also able to pick some data from dropdown.  And  my console doesn't throw any error.

Best Regards,

Damian

Please insert min. 20 characters.

Dear 1P3Cmdb, I've tried to reproduce your error using provided code, but for me everything is working fine. Here's the code: .html:

<div class="row">

<divclass="col-md-6 mx-auto my-5">

<mdb-completer [label]="ProjectOwner"id="ProjectOwner"name="ProjectOwner" [(ngModel)]="prjOwner" [datasource]="employeeCompleterService" [minSearchLength]="3"></mdb-completer>

</div>

</div>

.ts:

protected searchStr:string;

protected employeeCompleterService: CompleterData;

names: Array<string>;

protected searchData= [ ];

constructor(private completerService: CompleterService) {

this.names = newArray<string>();

this.employeeCompleterService = completerService.local(this.names);

}

ngOnInit() {

}

ngAfterViewInit() {

setTimeout(() => {

this.names.push('yellow', 'black', 'red');

}, 3000);

}

In which scenario your names array are being populated with items? I'm doing this in setTimeout() in ngAfterViewInit() lifecycle. I'm able to type something into input area, the dropdown is showing correctly, i'm also able to pick some data from dropdown. And my console doesn't throw any error. Best Regards, Damian

1P3Cmdb pro commented 6 years ago

The array is being populated using google sheets via Gapi - I have console logged the array contents, there are about 22629 items in the array, all of them are strings, and as I've said before, the autocomplete definitely worked previously. Do you have any other ideas as to how we can solve this ? - perhaps a video call? I cannot share the entirety of the code here as it contains various api keys and sensitive data, so am looking to find alternative solutions

1P3Cmdb pro commented 6 years ago

Also it is working fine ( exact same process ) with smaller arrays populated from the same google sheet, It seems to me that its only the 3 big ones that is causing these issues

Damian Gemza staff commented 6 years ago

Could you share me a way in which we can easily reproduce set of data which you're using? Fr example, for 20,000 random string items? I don't need to get your private set, but If you would advise me how to generate that much strings, I would appreciate.

1P3Cmdb pro commented 6 years ago

when using this simple code to generate 30000 items, it works without any problems : for(var i = 0; i < 30000; i++){ names.push(i.toString()); } I will try to more closely replicate the original set of data and get back to you

Damian Gemza staff commented 6 years ago

I've got an 30000 string items like 'sfg6bvx62' in my array, and there's no problem. I'm unable without any problems to pick items, search for them, click on input etc etc. Which version of MDB Angular you're using? And how long is single string item in your array? How much chars? Does he contains a white signs like space or special signs # $ % or others?

1P3Cmdb pro commented 6 years ago

Damian, I found the error. Turns out it never was anything to do with MDBBootstrap's component. I just made an error in sanitizing the data coming from the google sheet, I missed checking for undefined ( empty ) columns. once I added a check and removed them all from the dataset its working again. Thank you for your patience and sorry for the time wasted !

Add comment

Closed

This topic is closed.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

1P3Cmdb

Pro User 7Support score
3Questions 0Answers 0Snippets