Unable to fetch data from asp.net core api into angular 6

Question

net core api project in backend and using angular 6, using datatables plugin for displaying the grid , data is getting passed from the api but not getting shown in grid showing blank grid

following is service file code

export class DoctorsServiceService {

formData : DoctorVM;
readonly rootUrl = "https://localhost:44317/api/";
list: DoctorVM[];


constructor(private http:HttpClient) { }

getDoctors(){
this.http.get(this.rootUrl+"Doctors").toPromise().then(res => this.list = 
res as DoctorVM[]);
}
}

following is html file code

<table class="table table-striped" [mfData]="service.list" #mf="mfDataTable" 
[mfRowsOnPage]="5">
<thead>
<tr>
  <th>
      <mfDefaultSorter by="name">Name</mfDefaultSorter>
  </th>
  <th>
      <mfDefaultSorter by="email">Gender</mfDefaultSorter>
  </th>
  <th>
      <mfDefaultSorter by="age">Specialities</mfDefaultSorter>
  </th>
  <th style="width: 20%">
      <mfDefaultSorter by="city">AverageRating</mfDefaultSorter>
  </th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of mf.data">
  <td>{{item.Name}}</td>
  <td>{{item.Gender}}</td>
  <td>{{item.Specialities}}</td>
  <td>{{item.AverageRating}}</td>
</tr>
</tbody>
<tfoot>
<tr>
  <td colspan="4">
      <mfBootstrapPaginator></mfBootstrapPaginator>
  </td>
</tr>
</tfoot>

Blank Grid Image

Answer 1

From the picture where you can actually see that data is available (there are rows) I am strongly suspecting that you're using a CamelCasePropertyNamesContractResolver on the ASP side of the application. That means even though your property names in C# will start with a capital letter, the returned JSON uses camel case (starting with a lower case letter)