Calling WebApi with dataset in angular

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

class="table table-bordered">
"let header of headers">{{header}}
"let row of data">
"let key of headers">{{row[key]}}

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Rijwan Ansari5y ago
Try this way
this.service.getList().subscribe(data => {
       this.data = data;
       console.log(data);
       this.headers = Object.keys(data.Table1[0]);
     });
In you data response, there are two tables and you need data from Table1.
+1
kl baiju5y ago
following output gets in network tab of inspect element
+1
kl baiju5y ago
console.log(data) returns the Error
Error trying to diff '[object Object]'. Only arrays and iterables are allowed
+1
Kiran Mohanty5y ago
1. console.log(data)
do you see any data here?
Try changing code like below.
1. "let row of data.Table">
Note:- data.Table will fetch you 2 records (table1 & tale 2). Instead of doing this, map these table data to custom object in API and then send it to angular.