CODEWITHSUNDEEP
angular
baiju krishnan
baiju krishnan

Reputation: 241

Json file not displaying data in html table

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

enter image description here 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":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}]

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 enter image description here

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

Upvotes: 0

Views: 72

Answers (1)

Sanka Sanjeeva
Sanka Sanjeeva

Reputation: 3520

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>

Upvotes: 1

Related Questions