How to call 3 different Api's based on a onChange() function-CodePudding

I need to call 3 different API's with different parameter based on a onChange function.

www.foods.com/api/json/v1/1/filter.php?i=chicken_breast
www.foods.com/api/json/v1/1/filter.php?c=Seafood
www.foods.com/api/json/v1/1/filter.php?a=Canadian

I have three dropdowns Category, Area and Ingredients and I do have to call three different api which actually has the same api endpoint with 3 different paramaters.

If I choose Category dropdown I have to call: www.foods.com/api/json/v1/1/filter.php?c=Seafood

If I choose Area dropdown I have to call: www.foods.com/api/json/v1/1/filter.php?a=Canadian

If I choose Ingredients dropdown I have to call: www.foods.com/api/json/v1/1/filter.php?i=chicken_breast

HTML:

     <div >
         <select name="Categories" (change)="onCategorySelected($event)" >
            <option value="" disabled selected>Categories</option>
            <option *ngFor="let foodName of foodTypeValue" [value]="foodName">{{foodName}}</option>
        </select>
         <select name="Area" (change)="onCategorySelected($event)" >
            <option value="" disabled selected>Area</option>
            <option *ngFor="let areaName of loadArea" [value]="areaName.strArea">{{areaName.strArea}}</option>
        </select>
        <select name="Ingredients" (change)="onCategorySelected($event)"
            >
            <option value="" disabled selected>Ingredients</option>
            <option *ngFor="let ingredientsName of ingredientsList" [value]="ingredientsName">
                {{ingredientsName}}</option>
        </select>
    </div>

Is there Any feasible way that I can handle this through rxjs operator or any other way ?

CodePudding user response：

Just add a second parameter, which holds the query field name.

<div >
         <select name="Categories" (change)="onCategorySelected($event, 'c')" >
            <option value="" disabled selected>Categories</option>
            <option *ngFor="let foodName of foodTypeValue" [value]="foodName">{{foodName}}</option>
        </select>
         <select name="Area" (change)="onCategorySelected($event, 'a')" >
            <option value="" disabled selected>Area</option>
            <option *ngFor="let areaName of loadArea" [value]="areaName.strArea">{{areaName.strArea}}</option>
        </select>
        <select name="Ingredients" (change)="onCategorySelected($event, 'i')"
            >
            <option value="" disabled selected>Ingredients</option>
            <option *ngFor="let ingredientsName of ingredientsList" [value]="ingredientsName">
                {{ingredientsName}}</option>
        </select>
    </div>


onCategorySelected(event, queryFieldname) {
  // do your request using queryFieldname to build the url
}

Edit:

loadFilterDetails(
    name: string, // fix the order of the params
    queryfield: string,
  ): Observable<{ meals: Filter[] }> {
    return this.http
      .get<{ meals: Filter[] }>(
        this.recipies.filterDetails   `?${queryfield}=${name}` // use string literals
      )
      .pipe(
        tap((respones) => {
          this.getFilterDetails = respones?.meals;
        })
      );
  }