Why doesn't my custom data provider work? "You provided 'null' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable"

[n0490b]

I have a mysql database that I would like to query and than search. I am using PHP, PDO, and MySQL. I fetch the data and than encode it as json using php like this

`$stmt = $pdo->query('SELECT * FROM siteData');
$resultJSON = json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));
header('Content-Type: application/json');
echo ($resultJSON);`

Screen shot of output in browser

protected jobSiteDataService: CompleterData;
protected   jobSiteSearchStr:  string;
protected   jobSiteValue: string;

constructor(public navCtrl: NavController, private completerService: CompleterService, public modalCtrl: ModalController) {

this.jobSiteDataService = completerService.remote(
  "www.exampleLink.com/getdata.php",
  "province",
  "province");
}

public onJobSiteSelected(selected: CompleterItem) {

    if (selected) {

      this.jobSiteValue     = selected.title;
      this.disableJobSite   = true;
      } else {
      //this.jobSiteValue = "";
    }
 }

the completer itself

      <ng2-completer name="jobSiteCompleter"
                       [inputId]="'jobSiteSearchInput'"
                       [datasource]="jobSiteDataService"
                       [(ngModel)]="jobSiteSearchStr"
                       (selected)="onJobSiteSelected($event)"
                       [minSearchLength]="2"
                       [placeholder]="'Search'"
                       [disableInput]="disableJobSite"
                       #colorRequired="ngModel">
        </ng2-completer>

The error I'm getting

Screenshot of header requests

[oferh]

I think your URL is missing http:// or https:// prefix

[n0490b]

Thanks for replying. I added the http:// and its still not working

[n0490b]

If you would like you can try the link for yourself its pasted here https://privnote.com/2gg2ea6p#Rnaz6dPfP (I posted it on a private message website that will self destruct the message after 24 hours because I want to keep the data private)

[oferh]

please try this:

this.jobSiteDataService = completerService.remote(
  "www.exampleLink.com/getdata.php",
  "city.province",
  "city.province");
}

[joeribelis]

And have you tried to extend the CompleterItem for a custom custom data provider / datasource?

I used this example

For connection my python backend to the ng2-autocompleter datasource

Something like

export class siteDataService extends Subject<CompleterItem[]> implements CompleterData {
    constructor(private siteDataBackendService: SiteDataBackendService) {
        super()
    }

    public search(term: string): void {
      this.siteDataBackendService
        .searchSiteData(term)
        .subscribe(
          (valueArray) => {
              let data = JSON.parse(valueArray[2].responseText).result
              let matches: CompleterItem[] = data.map((result: any) => {
                  return {
                      title: result.name,
                      originalObject: result
                  }
              })
              this.next(matches)
            },
            (e) => {
              console.log(e)
            },
            () => {
              console.log("search complete!!!")
            })
    }

    public cancel() {
        // Handle cancel
    }
}

[n0490b]

@oferh I just tried and it doesn't work

[n0490b]

@joeribelis Thanks for the help. I have not tried it that way yet. I am having a hard time understanding the code in the tutorial I have never worked with ASP.NET. In the tutorial the constructor calls Configuration but I dont see the method or the app.constants file its in anywhere in the tutorial. Could you possibly post what your siteBackEndService looks like? I'm not sure where to put my search URL

[n0490b]

I just updated the original post with some variables I forgot to add earlier

[n0490b]

I'm getting this error in the dev console when I add a '?' at the end of the search url i.e. www.examplesite.com/GetData.php? but I dont think I need a ? at the end I was just testing it.

[n0490b]

@oferh In my PHP file that I am using to query the database I am just doing a select * and echoing out the data as JSON like this

$stmt = $pdo->query('SELECT * FROM siteData');
$resultJSON = json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));
header('Content-Type: application/json');
echo ($resultJSON);` 

But in the browser when I start typing in the bar the url in the network console becomes www.exampleurl.com/getdata.phpGEO and its a GET request like this

My question is do I need to add a $_GET request on my PHP page and use that term to query the database (i.e. select * from jobSite WHERE col1 = :term OR col2= :term)" with :term being whatever string I am searching? From what I understand I dont need to do any of that the purpose of the plugin is that it searches the JSON data for you. Am I correct?

[oferh]

@n0490b can't help much about the PHP side, but your request should return 200 and the data. About whether you need to send the term or not this is up to you, the component filters the results for you but sending a request that returns the same result every time is not efficient and it's probably better to get the data once with HTTP and pass it to the component as local data