How to use Arrays in Typescript in Angular

Question

I have written a Rest API which returns set of data which are used to populate 2 drop-downs of a form.The returned data from the API are received from the Angular back-end and bound to the drop-downs. Instead of writing 2 Get requests to get data for 2 forms I try to get that data in one single Get.

Java Back-end Get method

 @GetMapping("/flight/formdata")
    public List getWebSiteFormData() {

        List formDataSet=FligthtDataServices.getWebSiteFormData();
        return formDataSet;
    }

Set of data displayed on Postman

[
    [
        "London Heathrow",
        "AP"
    ],
    [
        "Velana International Airport",
        "AP"
    ],
    [
        "Hamad International Airport",
        "AP"
    ],
    [
        "Suvarnabhumi Airport",
        "AP"
    ],
    [
        "Changi Airport",
        "AP"
    ],
    [
        "Business",
        "CL"
    ],
    [
        "Premium Economy",
        "CL"
    ],
    [
        "Economy",
        "CL"
    ]
]

Service class

  getWebSiteFormData():Observable<any>{
    return this.http.get(`${this.baseUrl}/formdata`);
  }

My Approach is, Data arrays who has value 'AP' should be bind to Departure Airports drop-down and the arrays who has 'CL' should be shown on Class Drop-down.So What I did was based on those two identifiers I tried to divide that data into 2 arrays fromairportlist=[]; , flightclass=[];

Booking Component

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)
  }
}

Booking.component.html file

 <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>

But it doesn't seem to be working nothing is displayed on the drop-down as shown on the figure

Please suggest a way to correct it if my approach is wrong.

score 0 · Answer 1 · answered Jul 19 '20 at 11:38

0

First use *ngFor: <option *ngFor="let option of fromairportlist">{{ option }}</option>

this can be helpful Angular 4 setting selected option in Dropdown

answered Jul 19 '20 at 11:38

adian

278
1
9

score 0 · Answer 2 · answered Jul 19 '20 at 11:56

Since your result is a string array, loop it through a for loop. Simply,

<select>
  <option *ngFor="let item of fromairportlist">{{item}}</option>
</select>

If any doubts, see the stackblitz solution for your ref. https://stackblitz.com/edit/angular-m2kfec

How to use Arrays in Typescript in Angular

2 Answers2