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

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

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

Jazzguitar68

10Support score
2Questions 0Answers

0Snippets likes 0Snippets