How to use angular 6 datatables with observable data from server side(MySQL&Java&Springboot&hibernate) or How to convert an observable to an array?

Question

see: ERROR am facing due to using mf.data ... when I remove mf from data {(mf.)data} system display well, but data table features wouldn't work.

ClientsComponents.html:4 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed at

service method to get all clients : Using Pipe and map because of deprecated 'do'

see my imports :

 import { Injectable } from '@angular/core';
import { HttpClient, HttpEvent, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
...
 getClients(): Observable<Signup[]>{
    return this.http.get<Signup[]>('http://localhost:8080/api/clients/all')
    .pipe(map(data => return data));
    }

Component for getting clients from angular service :

showClients(enable: boolean) {
    this.showClient = enable;

    if (enable) {
      this.data = this.signupService.getClients();
      //this.data = this.clients ;
        console.log("Component : ");    
        console.log(this.data);   
    }
  }

HTML Data table template : breakpoint : *ngFor triggers :: Only arrays or iterables allowed here error...

    <div class="container">
        <button class="button btn-info" *ngIf='showClient' (click)='showClients(false)'>Hide Clients</button>
        <button class="button btn-info" *ngIf='!showClient' (click)='showClients(true)'>show Clients</button>
            <div [hidden]="!showClient">    


                  <div class="panel panel-primary">
                    <div class="panel-heading">List of clients</div>
                    <!--   start  -->

                    <table class="table table-striped" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="5">
                    <thead>
                    <tr>
                        <th style="width: 20%">
                            <mfDefaultSorter by="name">Name</mfDefaultSorter>
                        </th> ...
                    </thead>
                    <tbody>
                        <tr *ngFor="let x of mf.data | async" >
                        <td class="text-right">{{x.fname}}</td>
...

Ionita Bogdan · Answer 1 · 2019-01-22T20:45:24.167

0

getClients(): Observable<Signup[]>{
    return this.http.get<Signup[]>('http://localhost:8080/api/clients/all')
}

showClients(enable: boolean) {
    this.showClient = enable;

    if (enable) {
      this.data = this.signupService.getClients();
    }
  }

<ng-container *ngIf="(data | async) as array">
        <tr *ngFor="let x of array " >
        <td class="text-right">{{x.fname}}</td>
</ng-container>

edited Jan 22 '19 at 20:45

answered Jan 22 '19 at 20:29

Ionita Bogdan

139
2
7

score 0 · Answer 2 · answered Jan 22 '19 at 20:41

0

You must subscribe to the observable, something like:

showClients(enable: boolean) {
    this.showClient = enable;

    if (enable) {
      this.signupService.getClients().subscribe(
         res => {
             this.data = res;
             console.log("Component : ",this.data);    
         }, 
         err => { console.log(err); }
       );
    }
  }

answered Jan 22 '19 at 20:41

MikNiller

1,242
11
17

ERROR in src/app/services/signup-service/signup.service.ts(22,2): error TS Type 'Subscription' is not assignable to type 'Observable'. Property '_isScalar' is missing in type 'Subscription'. – Neo Sono Jan 22 '19 at 21:24
is getClients() still returning an observable? The error indicates you are trying to subscribe to a subscription and not an observable. Did you remember to import Subscription from rxjs? And i suggest you use @Ionita's version of getClients() you dont need the map/pipe stuff. – MikNiller Jan 23 '19 at 07:39
and I am at work now, I left my project at home, and I have tried @Lonita Bogdan version...and the observable doesn't seem to change its type. I also tried to pass the data back to component , as array, but when I log data array, it logs an observable. that's why I thought converting an observable to an array would work, since the error complains about array and iterable. When I use dummy data/hard coded data, data table works fine, sort functionality also works fine, but when I use sever side data it complains about data type used in *ngFor . Thanks. – Neo Sono Jan 23 '19 at 09:57
Otherwise I might have to change the type of data table library(ngx-data table) I am using ... – Neo Sono Jan 23 '19 at 10:02
UPDATE : this is the error I get : ClientsComponents.html:4 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed at – Neo Sono Jan 23 '19 at 10:03
You need to understand what an observable is before trying to use it, you cannot convert an observable to an array, that just doesn't make sense. I suggest you take a look at https://www.learnrxjs.io/ first. And are you sure you are getting an array back from your backend? What is written in the console ( console.log("Component : ",this.data); ) is this.data actually an array? – MikNiller Jan 23 '19 at 11:28
it prints an observable @MikNiller. Obsewrvable just give the flexibility in data, it can work with different forms of data, Objects, Array, byte, etc. what I don't get is how ngFor is able to loop through an observable, of course there is a key carrying some value about object data that's used in the *ngFor however when I use the same array/data var for data table, I get error mentioned above. – Neo Sono Jan 23 '19 at 20:50
How does observable works with *ngFor? how does ngFor knows the object and its key carrying valuable data and we don't get to see or know this data's where abouts ? like it use to be with rxjs map and do operators, and we can be able to manipulate data with ease, to our own benefit. I read that pipe is the replacement for the reserved key word 'do', that has been removed for use else where needed by blue print code. thus used pipe. – Neo Sono Jan 23 '19 at 21:06
If this line console.log("Component : ",this.data); in my answer prints an observable, then i would suspect that you forgot to subscribe, are you sure you didn't forget to add .subscribe( ... to this.signupService.getClients(). – MikNiller Jan 24 '19 at 08:19
I guess yes, when I use subscribe I get error mentioned above. {'Subscription' is not assignable to type 'Observable'} thing is, I can display data in the table, but data is not Integrated with data table sort feature ... I {Error trying to diff '[object Object]'. Only arrays and iterables are allowed at} – Neo Sono Jan 24 '19 at 14:52
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/187269/discussion-between-mikniller-and-neo-sono). – MikNiller Jan 24 '19 at 15:01

How to use angular 6 datatables with observable data from server side(MySQL&Java&Springboot&hibernate) or How to convert an observable to an array?

2 Answers2