Angular Autocomplete Remote Data Issue


Topic: Angular Autocomplete Remote Data Issue

Jazzguitar68 asked 6 years ago

Hey Folks,

I just started working with Angular not too long ago and recently purchased a pro license here.  When trying to get the Autocomplete control to use remote data from an Oracle ORDS API I get the error "You provided 'null' where a stream was expected.  You can provide an Observable, Promise, Array or Iterable".  The only difference between success and fail is the change of URL to the individual APIs.

When looking at the APIs through Postman I see the following returns.

Data Return from sample API:

[{
"name": "Afghanistan",
"code": "AF",
"flag": "demo/res/img/af.png"
},

 

Data Return from Oracle ORD:

{
"items": [
{
"customer_id": 568451,
"name": "<Customer Name>"
},

 

Any help would be much appreciated.

 

Thanks,

Wayne


Damian Gemza staff answered 6 years ago

Dear Wayne,

I see two possible ways of resolving your problem.

1st: Get data from the backend, and save it in some variable, and then use completerService.local instead of remote to autocomplete through your data.

Here's the code which you can use in this approach:

protected searchStr: string;
protected dataService: CompleterData;
protected searchData = [];

constructor(public completerService: CompleterService, private http: HttpClient) {
this.http.get('https://restcountries.eu/rest/v2/all').subscribe((data: any) => {
this.searchData = data;
this.dataService = completerService.local(this.searchData, 'name', 'name');
});
}

2nd: In the next release of MDB Angular we'll publish a new version of Auto Completer component. So you could use it after update to MDB Angular 7.2.0

Best Regards,

Damian


Jazzguitar68 commented 6 years ago

Hey Damian,

Thank you so much for the quick response.  Quick question for you.  Are you importing '@angular/common/http' or '@angular/http'??

Wayne


Damian Gemza staff commented 6 years ago

Dear @Jazzguitar68 

I'm using @angular/common/http module, because @angular/http is deprecated.

Best Regards,

Damian


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: Surface Book 2
  • Browser: Chrome
  • OS: Win10
  • Provided sample code: No
  • Provided link: No