[solved] NgFor only supports binding to Iterables such as Arrays

Ionic Framework ionic-v3
1

I’m trying to access an isbn api to get a list of books based on the isbn number. My function in home.ts is:

 getBooks() 
  {
    this.isbnsource.getBooks(this.isbn).subscribe(
      data => { this.foundBooks = data.json();
       },
      err => console.error(err), 
      () => console.log('getBooks completed') 
      );
 }

In the provider, I’m simply accessing using the URL:

  getBooks(isbn) 
  {
    //let books = this.http.get(`http://isbndb.com/api/v2/json/3Q47UX0K/books?q=${isbn}`)
    let books = this.http.get(`http://isbndb.com/api/v2/json/3Q47UX0K/books?q=9780713126983`)
    return books; 
  }

And in the home.html page, the ngFor is:

 <ion-card *ngFor="let book of foundBooks">
        <ion-card-header>
            {{book.title}}
        </ion-card-header> 
    </ion-card>

Based on online searches, I have tried to do this.data = Array.from(this.data) but still kept getting the following error in Chrome:

lang.js:345 Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
plugin.js:32 Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
home.ts:35 Object {page_count: 1, current_page: 1, index_searched: "isbn", result_count: 1, data: Array[1]}
home.ts:36 getBooks completed
browser_adapter.js:86 EXCEPTION: Error in build/pages/home/home.html:19:14
browser_adapter.js:77 EXCEPTION: Error in build/pages/home/home.html:19:14BrowserDomAdapter.logError @ browser_adapter.js:77BrowserDomAdapter.logGroup @ browser_adapter.js:87ExceptionHandler.call @ exception_handler.js:58(anonymous function) @ application_ref.js:317schedulerFn @ async.js:132SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:120onError @ ng_zone.js:117onHandleError @ ng_zone_impl.js:67ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423
browser_adapter.js:77 ORIGINAL EXCEPTION: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:67(anonymous function) @ application_ref.js:317schedulerFn @ async.js:132SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:120onError @ ng_zone.js:117onHandleError @ ng_zone_impl.js:67ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423
browser_adapter.js:77 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:70(anonymous function) @ application_ref.js:317schedulerFn @ async.js:132SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:120onError @ ng_zone.js:117onHandleError @ ng_zone_impl.js:67ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423
browser_adapter.js:77 Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at new BaseException (exceptions.js:20)
    at NgFor.set [as ngForOf] (ng_for.js:49)
    at DebugAppView._View_HomePage0.detectChangesInternal (HomePage.template.js:295)
    at DebugAppView.AppView.detectChanges (view.js:234)
    at DebugAppView.detectChanges (view.js:339)
    at DebugAppView.AppView.detectViewChildrenChanges (view.js:260)
    at DebugAppView.AppView.detectChangesInternal (view.js:245)
    at DebugAppView.AppView.detectChanges (view.js:234)
    at DebugAppView.detectChanges (view.js:339)
    at DebugAppView.AppView.detectContentChildrenChanges (view.js:252)BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:71(anonymous function) @ application_ref.js:317schedulerFn @ async.js:132SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:120onError @ ng_zone.js:117onHandleError @ ng_zone_impl.js:67ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423
browser_adapter.js:77 ERROR CONTEXT:BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:74(anonymous function) @ application_ref.js:317schedulerFn @ async.js:132SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:120onError @ ng_zone.js:117onHandleError @ ng_zone_impl.js:67ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423
browser_adapter.js:77 DebugContext {_view: _View_HomePage0, _nodeIndex: 28, _tplRow: 19, _tplCol: 14}BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:75(anonymous function) @ application_ref.js:317schedulerFn @ async.js:132SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:120onError @ ng_zone.js:117onHandleError @ ng_zone_impl.js:67ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423
Subscriber.js:229 Uncaught EXCEPTION: Error in build/pages/home/home.html:19:14
ORIGINAL EXCEPTION: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
ORIGINAL STACKTRACE:
Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at new BaseException (http://localhost:8100/build/js/app.bundle.js:1741:23)
    at NgFor.set [as ngForOf] (http://localhost:8100/build/js/app.bundle.js:476:27)
    at DebugAppView._View_HomePage0.detectChangesInternal (HomePage.template.js:295:30)
    at DebugAppView.AppView.detectChanges (http://localhost:8100/build/js/app.bundle.js:29894:14)
    at DebugAppView.detectChanges (http://localhost:8100/build/js/app.bundle.js:29999:44)
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:8100/build/js/app.bundle.js:29920:19)
    at DebugAppView.AppView.detectChangesInternal (http://localhost:8100/build/js/app.bundle.js:29905:14)
    at DebugAppView.AppView.detectChanges (http://localhost:8100/build/js/app.bundle.js:29894:14)
    at DebugAppView.detectChanges (http://localhost:8100/build/js/app.bundle.js:29999:44)
    at DebugAppView.AppView.detectContentChildrenChanges (http://localhost:8100/build/js/app.bundle.js:29912:19)
ERROR CONTEXT:
[object Object]

Any suggestions would be appreciated!

2

I know I just posted the question but…I tried the solution from here: Exception when iteration an rxjs observable · Issue #8728 · angular/angular · GitHub where I converted the json data to array and it worked!

 getBooks() 
      {
        this.isbnsource.getBooks(this.isbn).subscribe(
          data => { this.foundBooks = data.json();
     this.foundBooks = Array.of(this.foundBooks); 
           },
          err => console.error(err), 
          () => console.log('getBooks completed') 
          );
     }
2 Likes
3

Thanks mate you solved my problem and saved my time.

1 Like
4

I had the same issue, thanks for the solution.

5

Thanks pro. You’re the best.

6

thanks, we can also declare
foundBooks:any=[];
getBooks()
{
this.isbnsource.getBooks(this.isbn)…subscribe
(
Data => this.foundBooks:any= Data,
error =>
{
this.statusMessage =
‘Problem with the service. Please try again after sometime’;
});

 }
7

I know this is marked as solved, but this was one of the dozen tabs i had open when troubleshooting a similar problem.

I’ve compiled some notes in an answer over on Stack Exchange

8

Solved the problem, Thanks for the solution.

9

thanks it is working for my code also .
trying from 2 days to display data on html view.:grinning::grinning:

10

thanks buddy… 3 hours searched the script, finally got it

11

I am also having this problem ,while implementing this solution I caught up
with this error TypeError: res.json is not a function at MapSubscriber