Data not displayed on Grid in angular 4 - json

Question

I want to populate my grid with the data which i am receiving from API
below is my API response which i am getting
[
{
"intUserId": 1109,
"vcrFirstName": "sdvlbs",
"vcrLastName": "dsbvsdfn",
"vcrLoginName": "!##DBASDI?\"|}",
"vcrPassword": "eclerx#123",
"vcrStatus": "InActive",
"vcrIsClient": "eClerx",
"vcrEmail": "sdvlbs.dsbvsdfn#eClerx.com",
"vcrRole": "Analyst,Auditor,Team Lead,Manager",
"Agreements_Selected": "ISDA,CSA,Repo,SLA,PBA"
}
]
But at the time of passing this data to HTML by grid is still blank
Below is my .ts code
arrBirds:Array<string> = [];
userdata(){
this.http.get(this.url).subscribe((res)=>{
this.arrBirds = Array.of(res.json()) ;
console.log(this.arrBirds)
});
}
Below is my HTML
<table cellpadding="0" width="100%" cellspacing="0" border="0" class="search_grid_view table-striped">
<thead>
<tr>
<th style="min-width: 100px;">Login Name</th>
<th>First Name</th>
<th>Last Name</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let char of arrBirds">
<td >
{{char.vcrPassword}}
</td>
<td >
{{char.vcrStatus}}
</td>
<td >
{{char.Agreements_Selected}}
</td>
<td >
{{char.vcrEmail}}
</td>
</tr>
</tbody>
</table>
i am trying to iterate the data which i am receiving from API response
Below is my API code
public HttpResponseMessage GetCheckBoxes()
{
HttpResponseMessage response;
UserDB userDB = new UserDB();
DataSet ds = userDB.UserGridDetails();
string json = JsonConvert.SerializeObject(ds.Tables[0], Formatting.Indented);
//response = Request.CreateResponse(HttpStatusCode.OK, "[" + json + "]");
response = Request.CreateResponse(HttpStatusCode.OK, json);
return response;
}
my grid doesn't populate with the data.
i am struggling since last 5 days.

Answer 1

I think html file is not in sync with http response
<tr *ngFor="let char of arrBirds">
<td > {{char?.vcrPassword}}</td>
<td > {{char?.vcrStatus}} </td>
<td > {{char?.Agreements_Selected}}</td>
<td > {{char?.vcrEmail}} </td>
</tr>
Change this in tr,it will work.
If it still don't work then import ChangeDetectorRef from angular/core
inject it in constructor and use detectchanges method in ChangeDetectorRef
import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '#angular/core';
constructor(private ref: ChangeDetectorRef) {}
userdata(){
this.http.get(this.url).subscribe((res)=>{
this.arrBirds = Array.of(res.json()) ;
this.ref.detectChanges();
console.log(this.arrBirds)
});
}
Hope It helps.

Answer 2

By parsing the JSON data it is working now.
userdata(){
this.http.get(this.url).subscribe((res)=>{
this.arrBirds = JSON.parse(res.json()) as Application[];
console.log(this.arrBirds)
});
}