title: Json file not displaying data in html table
body: <p>In my application data comes from webapi. following is the code</p>
  <pre><code>---
  [HttpGet]
      public JsonResult Get()
      {
          string dte = &quot;2021-01-01&quot;;
           string  uname = &quot;baiju&quot;;
          SqlConnection con = new SqlConnection(&quot;Server=LAPTOP-30BV9E85\\SQLSERVER;Database=Lekshmi;    user id=sa;password=baiju&quot;);
  
  
          SqlCommand cmd = new SqlCommand(&quot;Sp_Bookstatus3&quot;, con);
          cmd.CommandType = CommandType.StoredProcedure;
          cmd.Parameters.AddWithValue(&quot;@dte&quot;, dte);
          cmd.Parameters.AddWithValue(&quot;@uname&quot;, uname);
          //  SqlCommand cmd = new SqlCommand(&quot;select * from busmaster&quot;, 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
  </code></pre>
  <h2><a href="https://i.stack.imgur.com/ifo1t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ifo1t.png" alt="enter image description here" /></a>
  in browser following output</h2>
  <p>[{&quot;ID&quot;:100,&quot;01&quot;:null,&quot;02&quot;:null,&quot;03&quot;:null,&quot;04&quot;:null,&quot;05&quot;:null,&quot;06&quot;:null,&quot;07&quot;:null,&quot;08&quot;:null,&quot;09&quot;:null,&quot;10&quot;:null,&quot;11&quot;:null,&quot;12&quot;:null,&quot;13&quot;:null,&quot;14&quot;:null,&quot;15&quot;:null,&quot;16&quot;:null,&quot;17&quot;:null,&quot;18&quot;:null,&quot;19&quot;:null,&quot;20&quot;:null,&quot;21&quot;:null,&quot;22&quot;:null,&quot;23&quot;:null,&quot;24&quot;:null,&quot;25&quot;:null,&quot;26&quot;:null,&quot;27&quot;:null,&quot;28&quot;:null,&quot;29&quot;:null,&quot;30&quot;:null,&quot;31&quot;:null},{&quot;ID&quot;:101,&quot;01&quot;:null,&quot;02&quot;:null,&quot;03&quot;:null,&quot;04&quot;:null,&quot;05&quot;:null,&quot;06&quot;:null,&quot;07&quot;:null,&quot;08&quot;:null,&quot;09&quot;:null,&quot;10&quot;:null,&quot;11&quot;:null,&quot;12&quot;:null,&quot;13&quot;:null,&quot;14&quot;:null,&quot;15&quot;:null,&quot;16&quot;:null,&quot;17&quot;:null,&quot;18&quot;:null,&quot;19&quot;:null,&quot;20&quot;:null,&quot;21&quot;:null,&quot;22&quot;:null,&quot;23&quot;:null,&quot;24&quot;:null,&quot;25&quot;:null,&quot;26&quot;:null,&quot;27&quot;:null,&quot;28&quot;:null,&quot;29&quot;:null,&quot;30&quot;:null,&quot;31&quot;:null}]</p>
  <hr />
  <p>it is a table format like</p>
  <p>ID  01 02 03.......................................................31</p>
  <p>100 null null.......................................................null</p>
  <p>101 null null.......................................................null</p>
  <p>My requirement is to display this in angular page</p>
  <p>code in angular</p>
  <p>appcomponent.ts</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> 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=&gt;{
     this.DepList=data;
     this._object = Object;
     
     console.log(this.DepList);
     });</code></pre>
  </div>
  </div>
  </p>
  <p>appcomponent.html</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table id="tbl2" class="table table-hover"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th *ngFor="let header of _object.keys(DepList[0]); let i = index"&gt;{{header}}&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr *ngFor="let row of DepList; let i = index"&gt;
          &lt;td *ngFor="let objKey of _object.keys(row); let j = index"&gt;{{ row[objKey] }} &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>but iam getting the out put as
  <a href="https://i.stack.imgur.com/NbR7N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NbR7N.png" alt="enter image description here" /></a></p>
  <p>my requirement is it shouldbe in order like
  start with Id 01 02 ....30
  and next line with  100
  next with 101</p>