Calling WebApi with dataset in angular

Question

Hi ,

 

I want to fetch data from Web Api To angular

 

following is my WebApi code

public JsonResult Get() {
  string dte = "2021-01-01";
  string uname = "baiju";
  SqlConnection con = new SqlConnection("Server=LAPTOP30BV9E85\\SQLSERVER;Database=Lekshmi;user id=sa;password=baiju");
  SqlCommand cmd = new SqlCommand("Sp_Bookstatus1", con);
  cmd.CommandType = CommandType.StoredProcedure;
  cmd.Parameters.AddWithValue("@dte", dte);
  cmd.Parameters.AddWithValue("@uname", uname);
  SqlDataAdapter da = new SqlDataAdapter(cmd);
  DataSet ds = new DataSet();
  con.Open();
  da.Fill(ds);
  con.Close();
  return new JsonResult(ds);
}

data comes from a storedprocedure and returns 2 tables

 

following is the result after testing in postman

 

{"Table":[{"ID":100,"01":null,"02":null,"03":null,"04":null,"05":null,"06":null,"07":null,"08":null,"09":null,"10":null,"11":null,"12":null,"13":null,"14":null,"15":null,"16":null,"17":null,"18":null,"19":null,"20":null,"21":null,"22":null,"23":null,"24":null,"25":null,"26":null,"27":null,"28":null,"29":null,"30":null,"31":null},{"ID":101,"01":null,"02":null,"03":null,"04":null,"05":null,"06":null,"07":null,"08":null,"09":null,"10":null,"11":null,"12":null,"13":null,"14":null,"15":null,"16":null,"17":null,"18":null,"19":null,"20":null,"21":null,"22":null,"23":null,"24":null,"25":null,"26":null,"27":null,"28":null,"29":null,"30":null,"31":null}],

 

"Table1":[{"Id":100,"Name":"lekshmi","model":"2020","regno":"KL2344","seats":"23"},{"Id":101,"Name":"Ram","model":"2019","regno":"KL23677","seats":"50"}]}

 

here showing Table and Table1 are showing above result

 

following is the appcomponent.ts

import {
  Component,
  OnInit,
  VERSION
} from '@angular/core';
import * as $ from 'jquery';
import {
  SharedService
} from 'src/app/shared.service';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  }) export class AppComponent implements OnInit {
    headers: any[] = [];data: any = [];constructor(private service: SharedService) {}
    ngOnInit() {
      this.service.getList().subscribe(data => {
        this.data = data;
        console.log(data);
        this.headers = Object.keys(this.data[0]).sort() this.headers.splice(0, 0, this.headers.pop());
      });
    }

code for appcomponent.html

<div >
<table class="table table-bordered">
<tr>
<th *ngFor="let header of headers">{{header}}</th>
</tr>
<tr *ngFor="let row of data">
<td *ngFor="let key of headers">{{row[key]}}</td>
</tr>
</table>
</div>

After running both webapi and angular application iam getting following error

 

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