I have developed a Rest API that provides data to populate two drop-down lists in a form. The information retrieved from the API is grabbed by the Angular backend and assigned to the respective drop-downs. Rather than making separate Get requests for each form, I attempted to fetch all necessary data with a single Get request.
Here is an example of a Java Back-end Get method:
@GetMapping("/flight/formdata")
public List getWebSiteFormData() {
List formDataSet = FligthtDataServices.getWebSiteFormData();
return formDataSet;
}
The set of data displayed on Postman looks like this:
[
[
"London Heathrow",
"AP"
],
[
"Velana International Airport",
"AP"
],
[
"Hamad International Airport",
"AP"
],
[
"Suvarnabhumi Airport",
"AP"
],
[
"Changi Airport",
"AP"
],
[
"Business",
"CL"
],
[
"Premium Economy",
"CL"
],
[
"Economy",
"CL"
]
]
In the Service class, we have the following code snippet:
getWebSiteFormData():Observable<any>{
return this.http.get(`${this.baseUrl}/formdata`);
}
My strategy involves binding arrays with 'AP' values to Departure Airports drop-down and those with 'CL' values to Class drop-down. To achieve this, I separated the data into two arrays using identifiers fromAirportList=[]; and flightClass=[];.
The Booking Component is illustrated below:
export class BookingComponent implements OnInit {
public websiteFormData=[];
public flightClass=[];
public fromAirportList=[];
constructor(private flightService:FlightService, private router: Router) { }
ngOnInit(): void {
this.loadFormData();
}
loadFormData(){
this.flightService.getWebSiteFormData().subscribe(data=>this.websiteFormData=data,error=>console.error(error))
for (let item of this.websiteFormData) {
if(item[1]=='AP'){
this.fromAirportList.push(item[0]);
}
}
console.log(this.fromAirportList)
}
}
The Booking.component.html file contains the HTML structure for the drop-down displays.
<td style="height: 39px; width: 14%;">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Departure</div>
</div>
<select class="form-control" id="classtype" name="classtype" [(ngModel)]="booking.classtype">
<option>{{fromAirportList[0]}}</option>
<option>{{fromAirportList[1]}}</option>
<option>{{fromAirportList[2]}}</option>
</select>
</div>
</td>
Despite my efforts, the drop-down remains empty as seen in the provided image. Your suggestions for correcting this issue would be greatly appreciated.