Rendering multiple tables are same time causes issue on display in data tables(UI)

120
January 22, 2021, at 9:50 PM

Have multiple datatables on same page, and every table have different API's for fetching the data. If one of the API is not returning the data, both the tables data is not displaying in the UI and getting error in console like

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

Could you please suggest me like is there any way there is no data in the API, can we display like "No Data Available" in the table.

If API is not returning the data im getting error response,

{
  "timestamp": "2020-01-20T16:45:07.064+0000",
  "errorMessage": "data not found",
  "errorCode": 404,
  "errorDetails": "uri=abc/getXYZJournls"
}

Variables :

results: any = [];
results2: any = [];

First table Code:

this.http
.get<any[]>("/testAPI/getTestAPI1Recoards, {
  params,
})
.subscribe(
  (res) => {         
    this.results = res as any;
    this.dtTrigger1.next();
  },          
   (err) => {
     console.log("Error While Loading the Table  ::: " + err.error);
   }
);

Second table code:

this.http
.get<any[]>("/testAPI/getTestAPI2Recoards, {
  params,
})
.subscribe(
  (res) => {         
    this.results2 = res as any;
    this.dtTrigger2.next();
  },          
   (err) => {
     console.log("Error While Loading the Table  ::: " + err.error);
   }
);

First table HTML code:

<table datatable
[dtOptions]="dtOptions[0]"
[dtTrigger]="dtTrigger1">
<thead>
  <tr>
    <th class="">Test1</th>
    <th class="">Test2</th>
    <th>Test3</th>
    <th>Test4</th>
  </tr>          
</thead>   
<tbody>
    <tr *ngFor="let result of results">
    <td>{{ result.test1 }}</td>
    <td>{{ result.test2 }}</td>
    <td>{{ result.test3 }}</td>
    <td>{{ result.test4 }}</td>            
  </tr>
</tbody>
</table>

Second table HTML code:

<table datatable
[dtOptions]="dtOptions[1]"
[dtTrigger]="dtTrigger2">
<thead>
  <tr>
    <th class="">Test1</th>
    <th class="">Test2</th>
    <th>Test3</th>
    <th>Test4</th>
  </tr>          
</thead>   
<tbody>
 <tr *ngFor="let2 result of results2">
    <td>{{ result2.test1 }}</td>
    <td>{{ result2.test2 }}</td>
    <td>{{ result2.test3 }}</td>
    <td>{{ result2.test4 }}</td>            
  </tr>
</tbody>
</table>

READ ALSO
How to save numpy arrays with pymysql?

How to save numpy arrays with pymysql?

Is there a way to save numpy arrays (ideally in compressed form) into a MySQL database with pymysql? I understand how to save numbers and strings, but how do query strings work with byte objects? Thanks!

124
Multi-tenant architecture with Sequelize and MySQL

Multi-tenant architecture with Sequelize and MySQL

I am building a multi-tenant SaaS app with MySQL(57 & 8) as a backend (because I know it and its easy client WorkBench)

143
Setting nativeElement.scrollTop is not working in android app in angular

Setting nativeElement.scrollTop is not working in android app in angular

My code is working fine in browser but it has no effect in android appIs there anything missing for android app to work? Can anybody please help? Thankyou in advance

113
How to pass token to verify user across html pages using node js

How to pass token to verify user across html pages using node js

I am trying to pass a token that verifies which user is logged in across html pagesOnce the user logs in a token is created which contains the user _Id

77