I am working with a web API to retrieve data in JSON format. The data is returned successfully, but when I try to loop over it, I encounter an error stating 'Cannot read the property of undefined CustomerName'.
[System.Web.Http.HttpGet]
public object GetBookings(string SearchByParam = "", byte WhichRecords
= 1)
{
List<ZahidCarWash.ViewModels.BookingArrivalCancellationViewModel>
lstBookingArrivalCancellation =
BookingsRepository.SelectCustomerBookingDetailsAndroid(SearchByParam,
WhichRecords);
if (lstBookingArrivalCancellation.Count > 0)
{
return Json(new { ReturnStatusJSON = true, lstArrivalCancellation = lstBookingArrivalCancellation });
}
else
{
return Json(new { ReturnStatusJSON = false, lstArrivalCancellation = lstBookingArrivalCancellation });
}
}
Customer.service.ts
export class CustomerService {
formData: Customer;
Data: Customer[];
constructor(private http: HttpClient) { }
getData() {
return
this.http.get('http://localhost:13924/api/AndroidOperations/GetBookings')
.subscribe(function(data: any) {
this.Data = data['lstArrivalCancellation'] as Customer[];
console.log(this.Data);
});
}
}
customer-list.component.ts
export class CustomersListComponent implements OnInit {
constructor(public service: CustomerService) {
}
ngOnInit() {
this.service.getData();
}
}
.html
<table class="table table-hover">
<tr *ngFor="let d of service.Data | async"></tr>
<td *ngIf="CustomerName">{{d.CustomerName}}</td>
<td>Tr</td>
</table>
Customer Mode:
export class Customer {
CustomerID: number ;
CustomerName: string;
ContactNo: string;
VehicleRegNo: string;
fk_VehicleMakeID: number;
VehicleModel: number;
}