TypeError: Cannot read property 'slice' of undefined ng2-bootstrap typeahead

Question

I'm trying to setup a Google Maps Autocomplete. But I'm getting this error

TypeError: Cannot read property 'slice' of undefined 

I've followed the example here: https://valor-software.com/ng2-bootstrap/index-bs4.html#/typeahead

In my controller:

this.googleLocation = Observable.create((observer:any) => {
      // Runs on every search
      observer.next(this.locationSearch);
    }).mergeMap((token:string) => this.getPredictions(token))

getPredictions function:

getPredictions (value) {
    return Observable.of(
        this.autocompleteService.getQueryPredictions({
            input: value
        }, function(result, status) {

            if (status == google.maps.places.PlacesServiceStatus.OK) {
            console.log(result);


            return result;
            } else if (status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS) {
            return [];
            } else {
            console.log(status)
            }
        })
    );
}

and my view looks like this:

<input [(ngModel)]="locationSearch"
            name="locationSearch"
            [typeahead]="googleLocation"
            [typeaheadOptionsLimit]="7"
            [typeaheadWaitMs]="300"
            [typeaheadAsync]="false"
            (typeaheadOnSelect)="typeaheadOnSelect($event)"
            (typeaheadLoading)="changeTypeaheadLoading($event)"
            (typeaheadNoResults)="changeTypeaheadNoResults($event)"
            (typeaheadOnSelect)="typeaheadOnSelect($event)"
            [typeaheadOptionField]="'description'"
            placeholder="Locations loaded with timeout"
            class="form-control">

I'm getting the following dump in my console.

EXCEPTION: TypeError: Cannot read property 'slice' of undefined
browser_adapter.ts:82 EXCEPTION: TypeError: Cannot read property 'slice' of undefinedBrowserDomAdapter.logError @ browser_adapter.ts:82BrowserDomAdapter.logGroup @ browser_adapter.ts:93ExceptionHandler.call @ exception_handler.ts:58(anonymous function) @ application_ref.ts:374schedulerFn @ async.ts:148SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ async.ts:133onError @ ng_zone.ts:142onHandleError @ ng_zone_impl.ts:95ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423
browser_adapter.ts:82 STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.ts:82ExceptionHandler.call @ exception_handler.ts:61(anonymous function) @ application_ref.ts:374schedulerFn @ async.ts:148SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ async.ts:133onError @ ng_zone.ts:142onHandleError @ ng_zone_impl.ts:95ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423
browser_adapter.ts:82 TypeError: Cannot read property 'slice' of undefined
    at SafeSubscriber.eval [as _next] (typeahead.directive.js:186)
    at SafeSubscriber.__tryOrUnsub (Subscriber.ts:240)
    at SafeSubscriber.next (Subscriber.ts:192)
    at Subscriber._next (Subscriber.ts:133)
    at Subscriber.next (Subscriber.ts:93)
    at MergeMapSubscriber.notifyNext (mergeMap.ts:144)
    at InnerSubscriber._next (InnerSubscriber.ts:17)
    at InnerSubscriber.Subscriber.next (Subscriber.ts:93)
    at MergeMapSubscriber.notifyNext (mergeMap.ts:144)
    at InnerSubscriber._next (InnerSubscriber.ts:17)BrowserDomAdapter.logError @ browser_adapter.ts:82ExceptionHandler.call @ exception_handler.ts:62(anonymous function) @ application_ref.ts:374schedulerFn @ async.ts:148SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ async.ts:133onError @ ng_zone.ts:142onHandleError @ ng_zone_impl.ts:95ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423
Subscriber.ts:243 Uncaught TypeError: Cannot read property 'slice' of undefined(anonymous function) @ typeahead.directive.js:186SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93MergeMapSubscriber.notifyNext @ mergeMap.ts:144InnerSubscriber._next @ InnerSubscriber.ts:17Subscriber.next @ Subscriber.ts:93MergeMapSubscriber.notifyNext @ mergeMap.ts:144InnerSubscriber._next @ InnerSubscriber.ts:17Subscriber.next @ Subscriber.ts:93subscribeToResult @ subscribeToResult.ts:28MergeMapSubscriber._innerSub @ mergeMap.ts:128MergeMapSubscriber._tryNext @ mergeMap.ts:124MergeMapSubscriber._next @ mergeMap.ts:108Subscriber.next @ Subscriber.ts:93(anonymous function) @ createvent.component.ts:71Observable.subscribe @ Observable.ts:93Observable._subscribe @ Observable.ts:152MergeMapOperator.call @ mergeMap.ts:82Observable.subscribe @ Observable.ts:93subscribeToResult @ subscribeToResult.ts:32MergeMapSubscriber._innerSub @ mergeMap.ts:128MergeMapSubscriber._tryNext @ mergeMap.ts:124MergeMapSubscriber._next @ mergeMap.ts:108Subscriber.next @ Subscriber.ts:93DebounceTimeSubscriber.debouncedNext @ debounceTime.ts:71dispatchNext @ debounceTime.ts:89FutureAction.execute @ FutureAction.ts:30QueueScheduler.flush @ QueueScheduler.ts:24(anonymous function) @ FutureAction.ts:100ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ ng_zone_impl.ts:61ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423

createvent.component.ts:82 [Object, Object, Object, Object, Object]

The Objects from createvent.component.ts:82 are Google location objects.

Any help is appreciated.

UPDATE 1 I saw the typeahead.ts and found that everytime _matches goes undefined. I feel that the map resolves the function, as soon as it hits getPrediction function.

Thanks,

Answer 1

GetQueryPredictions method is receiving a callback as a parameter and it does not actually return anything. So when you do:

 Observable.of(this.autocompleteService.getQueryPredictions({...

you're actually returning undefined from the observable stream. Hence the error you get. You need to change the way you read the data and make sure you put the actual values into the Observable.