Ng2-completer error when trying to fetch data from remote server


I’m using ionic2 and the ng2-autocompleter plugin to create a typeahead input to dynamically query my database and return results as the user types. Here is an example using the ng2-autocompleter plugin to fetch remote data. Here are two other examples just ctrl+f dataRemote and ctrl+f dataRemote2. This is the error I’m getting "You provided 'null' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable". The documentation on the github page states that the Autocomplete list data source can be an array of strings or a URL that results in an array of strings or a CompleterData object but URL that returns JSON doesn’t work.

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

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

this.jobSiteDataService = completerService.remote(

public onJobSiteSelected(selected: CompleterItem) {

    if (selected) {

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

the completer itself

      <ng2-completer name="jobSiteCompleter"

I am searching my own remote database 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);

Screenshot of JSON output:

HTTP request info