Cannot find a differ supporting object '[object Object]' of type 'object' when making call to local json file

0
votes

What causes the error message:

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

and how do I fix it?

companies.json

[
  {
    "name": "one"
  },
  {
    "name": "two"
  },
  {
    "name": "three"
  },
  {
    "name": "four"
  },
  {
    "name": "five"
  }
]

dummy-api.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';

@Injectable()
export class DummyApi {
  constructor(public http: Http) {}

  filterCompanies(searchTerm) {
    return this.http.get('assets/data/companies.json').map(res => res.json()).subscribe((data) => {
      return data.filter(t=>t.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1);
    });
  }
}

search.ts

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { NavController } from 'ionic-angular';
import { DummyApi } from '../../providers/dummy-api/dummy-api';
import 'rxjs/add/operator/debounceTime';

@Component({
  selector: 'page-search',
  templateUrl: 'search.html',
  providers: [DummyApi]
})
export class SearchPage {

  searchTerm: string = '';
  searchControl: FormControl;
  companies: any;
  searching: any = false;

  constructor(public navCtrl: NavController, public dummyApiService: DummyApi) { 
    this.searchControl = new FormControl();
  }

  ionViewDidLoad() {
    this.setFilteredCompanies();
  }

  setFilteredCompanies() {
    this.companies = this.dummyApiService.filterCompanies(this.searchTerm);
  }
}

search.html

<ion-item *ngFor="let company of companies">
  {{ company.name }}
</ion-item>
1
angular
is it possible to create an stackbiltz pls? – Soroush
Your service returns a Subscription object. You can't iterate over a subscription You would know if you used actual types instead of any. The service must NOT subscribe. It must return an observable. The component (or the view using the async pipe) should subscribe. And please, upgrade and stop using the deprecated Http service and RxJS5. – JB Nizet
@JBNizet thanks. I was trying to combine both of these tutorials:joshmorony.com/loading-remote-json-data-with-http-in-ionic-2 and joshmorony.com/high-performance-list-filtering-in-ionic-2 to create a solution that loads from a local json file to populate a filtered list. How can I fix this? – methuselah
I beleive you would be better off creating a .ts file with one constant instead of a json and simply import it – mchl18

1 Answers

0
votes

Use a ts file and import it:

companies.ts

export const companies = [
  {
    "name": "one"
  },
  {
    "name": "two"
  },
  {
    "name": "three"
  },
  {
    "name": "four"
  },
  {
    "name": "five"
  }
];

search.ts 

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { NavController } from 'ionic-angular';
import { DummyApi } from '../../providers/dummy-api/dummy-api';
import 'rxjs/add/operator/debounceTime';

// import it
import { companies } from './companies'

@Component({
  selector: 'page-search',
  templateUrl: 'search.html',
  providers: [DummyApi]
})
export class SearchPage {

  searchTerm: string = '';
  searchControl: FormControl;

  // Set the value
  companies = companies;
  searching: any = false;

  constructor(public navCtrl: NavController, public dummyApiService: DummyApi) { 
    this.searchControl = new FormControl();
  }

  ionViewDidLoad() {
    this.setFilteredCompanies();
  }

  setFilteredCompanies() {
    this.companies = this.dummyApiService.filterCompanies(this.searchTerm);
  }
}