4
Answers

Calling WebApi with dataset in angular

kl baiju

kl baiju
3y
625
1
Hi ,
 
I want to fetch data from Web Api To angular
 
following is my WebApi code
  1. public JsonResult Get() {  
  2.   string dte = "2021-01-01";  
  3.   string uname = "baiju";  
  4.   SqlConnection con = new SqlConnection("Server=LAPTOP30BV9E85\\SQLSERVER;Database=Lekshmi;user id=sa;password=baiju");  
  5.   SqlCommand cmd = new SqlCommand("Sp_Bookstatus1", con);  
  6.   cmd.CommandType = CommandType.StoredProcedure;  
  7.   cmd.Parameters.AddWithValue("@dte", dte);  
  8.   cmd.Parameters.AddWithValue("@uname", uname);  
  9.   SqlDataAdapter da = new SqlDataAdapter(cmd);  
  10.   DataSet ds = new DataSet();  
  11.   con.Open();  
  12.   da.Fill(ds);  
  13.   con.Close();  
  14.   return new JsonResult(ds);  
  15. }  
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
  1. import {  
  2.   Component,  
  3.   OnInit,  
  4.   VERSION  
  5. } from '@angular/core';  
  6. import * as $ from 'jquery';  
  7. import {  
  8.   SharedService  
  9. } from 'src/app/shared.service';  
  10. @Component({  
  11.     selector: 'app-root',  
  12.     templateUrl: './app.component.html',  
  13.     styleUrls: ['./app.component.css']  
  14.   }) export class AppComponent implements OnInit {  
  15.     headers: any[] = [];data: any = [];constructor(private service: SharedService) {}  
  16.     ngOnInit() {  
  17.       this.service.getList().subscribe(data => {  
  18.         this.data = data;  
  19.         console.log(data);  
  20.         this.headers = Object.keys(this.data[0]).sort() this.headers.splice(0, 0, this.headers.pop());  
  21.       });  
  22.     }  
code for appcomponent.html
  1. <div >  
  2. <table class="table table-bordered">  
  3. <tr>  
  4. <th *ngFor="let header of headers">{{header}}</th>  
  5. </tr>  
  6. <tr *ngFor="let row of data">  
  7. <td *ngFor="let key of headers">{{row[key]}}</td>  
  8. </tr>  
  9. </table>  
  10. </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 
Answers (4)
Next Recommended Forum