How to get data from database to dropdown list in angular using REST API

Question

I have created an API for getting all services, I want to put the name of services in dropdown list, I have tested this code but it doesn't work!

HTML

<div class="col-lg-6">
     <select name="Service" 
      class="form-control">
     <option>-- Select Services --</option>
     <option [value]="serv.service_name" *ngFor="let serv of ServiceList">
       {{ serv.service_name}}
     </option>
   </select>
</div>

TS

ServiceList: any;
ngOnInit(): void {
this.serviceService.getAllServices().subscribe((data: any)=>{
  this.ServiceList = data;
  //console.log(this.services);
})  
}

It doesn't get data from database !!

Answer 1

Since there is no error in your console, the only reason your dropdown list would be empty is that your data is actually an empty array, i.e. [].

Add console.log(data); and check what your API returns.

EDIT:

According to your comment, your API returns:

[{…}] 0: {..., name_service: 'AAAA', ...} length: 1 [[Prototype]]: Array(0)

The property is named name_service and NOT service_name as you are using it in your HTML template...