Json 文件未在 html 表中显示数据

Question

In my application data comes from webapi. following is the code

---
[HttpGet]
    public JsonResult Get()
    {
        string dte = "2021-01-01";
         string  uname = "baiju";
        SqlConnection con = new SqlConnection("Server=LAPTOP-30BV9E85\\SQLSERVER;Database=Lekshmi;    user id=sa;password=baiju");


        SqlCommand cmd = new SqlCommand("Sp_Bookstatus3", con);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.AddWithValue("@dte", dte);
        cmd.Parameters.AddWithValue("@uname", uname);
        //  SqlCommand cmd = new SqlCommand("select * from busmaster", con);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        con.Open();
        da.Fill(ds);
        con.Close();
        return new JsonResult(ds.Tables[0]);

    }
---
got following output after breakpoint in code

in browser following output

[{"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":Z37A6259CC0C1DAE299A7866 489DFF0BDZ,"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":Z37 A6259CC0C1DAE299A7866489DFF0BDZ,"21":null,"22":null,"23":null,"24":null,"25":null,"26":null,"27":null,"28":null,"29":null,"30":null,"31":null}]

---

it is a table format like

ID 01 02 03.......................................................31

100 null null.......................................................null

101 null null.......................................................null

My requirement is to display this in angular page

code in angular

appcomponent.ts

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

appcomponent.html

 <table id="tbl2" class="table table-hover"> <thead> <tr> <th *ngFor="let header of _object.keys(DepList[0]); let i = index">{{header}}</th> </tr> </thead> <tbody> <tr *ngFor="let row of DepList; let i = index"> <td *ngFor="let objKey of _object.keys(row); let j = index">{{ row[objKey] }} </td> </tr> </tbody> </table>

but iam getting the out put as

my requirement is it shouldbe in order like start with Id 01 02....30 and next line with 100 next with 101

Answer 1

In your component.ts file

export class AppComponent implements OnInit {

  data = [];
  headers: string[];

  constructor(private service: SharedService){}

  ngOnInit() {
    this.service.getList().subscribe(data=>{
      this.data = data;
      this.headers = Object.keys(this.data[0]).sort()
      this.headers.splice(0, 0, this.headers.pop());
    });
  }
}

in component.html file

<table>
  <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>