Json file not displaying data in html table

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":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

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

Sanka Sanjeeva · Accepted Answer · 2021-03-10 06:45:37Z

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>

answered Mar 10, 2021 at 6:45

Sanka Sanjeeva

3,84830 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

baiju krishnan Over a year ago

this code is not working iam using angular 11

baiju krishnan Over a year ago

This is not problem of angular.Its only displaying table issue in bootstrap

baiju krishnan Over a year ago

if it is 10 columns like ID 01....09 then it display fine.if its more than 10 .column no 10 will be the first column onwards

Sanka Sanjeeva Over a year ago

it is not a problem with the angular version. I used hard-coded data to test. can you hard-code that data instead of calling the service and try it?. its work for me

Sanka Sanjeeva Over a year ago

check this stackblitz.com/edit/angular-ivy-aakgnd

|

Collectives™ on Stack Overflow

Json file not displaying data in html table

in browser following output

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

in browser following output

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related