Продлить HTTP Get Url по щелчку (Ionic 2 + Угловая 2)

Question

Я недавно сделал поиск моего приложения построено в ионном, который тянет из API с помощью метода HTTP GET, как показано ниже

static get parameters() { 
    return [[Http]]; 
} 

searchRecipes(id) { 
    var url = 'http://api.yummly.com/v1/api/recipes?_app_id=/////&_app_key=//////&q=' + encodeURI(id); 
    var response = this.http.get(url).map(res => res.json()); 
    return response; 
} 

До сих пор У меня есть id, в который они входят. Я теперь хочу добавить фильтры в мой поиск (ингредиенты, кухня и аллергии), это делается путем расширения URL-адреса далее с помощью специальных вызовов, таких как &allowedAllergy[] и allowedDiet[].

В настоящее время у меня есть список реализованных элементов, каждый из которых имеет значение, установленное для них, и при щелчке по нему он добавит к указанному url. Реализация такой же, как http://www.yummly.uk/

 <div class="diets"> 
     <ul> 
      <li>Lacto vegetarian</li> 
      <li>Ovo vegetarian</li> 
      <li>PaleoPescetarian</li> 
      <li>Vegan</li> 
      <li>Vegetarian</li> 
     </ul> 
    </div> 
    <div class="allergies"> 
     <ul> 
     <li>Dairy-Free</li> 
     <li>Egg-Free</li> 
     <li>Gluten-Free</li> 
     <li>Peanut-Free</li> 
     <li>Seafood-Free</li> 
     <li>Sesame-Free</li> 
     <li>Soy-Free</li> 
     <li>Sulfite-Free</li> 
     <li>Tree Nut-Free</li> 
     <li>Wheat-Free</li> 
     </ul> 
    </div> 

Метод поиска

рецепты: любой;

searchRecipeDB(event, key) { 
    if(event.target.value.length > 2) { 
     this.apiAuthentication.searchRecipes(event.target.value).subscribe(
      data => { 
       this.recipes = data.matches; 
       console.log(data); 
      }, 
      err => { 
       console.log(err); 
      }, 
      () => console.log('Recipe Search Complete') 
     ); 
    } 
} 

Если кто-нибудь может дать совет о том, как реализовать это, это будет спасатель жизни! Спасибо всем

Answer 1

Ok здесь компонент:

import {Component, OnInit} from "@angular/core" 
import {Http} from "@angular/http" 

@Component({ 
    selector: 'app-menu', 
    templateUrl: './menu.component.html' 
}) 
export class MenuComponent implements OnInit 
{ 
    diets: Array<string> = ['Lacto vegetarian', 'Ovo vegetarian', 'PaleoPescetarian', 'Vegan', 'Vegetarian']; 
    allergies: Array<string> = ['Dairy-Free', 
           'Egg-Free', 
           'Gluten-Free', 
           'Peanut-Free', 
           'Seafood-Free', 
           'Sesame-Free', 
           'Soy-Free', 
           'Sulfite-Free', 
           'Tree Nut-Free', 
           'Wheat-Free']; 


    id: number = 1; 
    selectedDiets: Array<boolean>; 
    selectedAllergies: Array<boolean>; 
    allowedAllergy: Array<string>; 
    allowedCuisine: Array<string>; 
    url: string; 

    constructor(private http: Http) 
    { 
     this.selectedDiets = new Array(this.diets.length).fill(false); 
     this.selectedAllergies = new Array(this.allergies.length).fill(false); 
    } 

    ngOnInit() 
    { 
    } 

    submit() 
    { 
     this.processAllergy(); 
     this.processDiets(); 
     this.searchRecipes(this.id, this.allowedAllergy, this.allowedCuisine); 
    } 

    processAllergy() 
    { 

     this.allowedAllergy = this.selectedAllergies.reduce((selectedList: Array<string>, isSelected: boolean, index: number) => 
     { 
      return isSelected ? [...selectedList, this.allergies[index]] : selectedList; 
     }, []) 

    } 

    processDiets() 
    { 
     this.allowedCuisine = this.selectedDiets.reduce((selectedList: Array<string>, isSelected: boolean, index: number) => 
     { 
      return isSelected ? [...selectedList, this.diets[index]] : selectedList; 
     }, []) 

    } 

    searchRecipes(id: number, 
        allowedAllergy: Array<string>, 
        allowedCuisine: Array<string>) 
    { 


     this.url = 'http://api.yummly.com/v1/api/recipes?_app_id=/////&_app_key=//////&q=' + encodeURI(id.toString()); 


     if (allowedAllergy.length) 
     { 
      this.url = this.url + `&allowedAllergy=${encodeURI(allowedAllergy.toString())}` 
     } 
     if (allowedCuisine.length) 
     { 
      this.url = this.url + `&allowedCuisine=${encodeURI(allowedCuisine.toString())}` 
     } 


     console.log(this.url); 
     //return this.http.get(url).map(res => res.json()); 
    } 
} 

И вид:

<pre>selectedDiets: {{selectedDiets | json}}</pre> 
<pre>selectedAllergies: {{selectedAllergies | json}}</pre> 
<pre>allowedAllergy: {{allowedAllergy | json}}</pre> 
<pre>selectedAllergies: {{allowedCuisine | json}}</pre> 
<div class="diets"> 
    <strong>Select diet regiments</strong> 
    <ul> 
    <li *ngFor="let diet of diets; let i = index"> 
     {{diet}} 
     <input type="checkbox" 
      [(ngModel)]="selectedDiets[i]"> 
    </li> 
    </ul> 
</div> 

<div class="allergies"> 
    <strong>Select allergy requirements</strong> 
    <ul> 
    <li *ngFor="let allergy of allergies; let i = index"> 
     {{allergy}} 
     <input type="checkbox" 
      [(ngModel)]="selectedAllergies[i]"> 
    </li> 
    </ul> 
</div> 
<pre>{{url}}</pre> 
<button (click)="submit()"> 
    search 
</button> 

Answer 2

попробовать это его немного основной, но будет делать работу:

searchRecipes(id: number, 
       allowedAllergy: Array<string>, 
       allowedCuisine: Array<string>) 
{ 
    let url = 'http://api.yummly.com/v1/api/recipes?_app_id=/////&_app_key=//////&q=' + encodeURI(id.toString()); 

    if (allowedAllergy.length) 
    { 
     url = url + `&allowedAllergy=${allowedAllergy.toString()}` 
    } 
    if (allowedCuisine.length) 
    { 
     url = url + `&allowedCuisine=${allowedCuisine.toString()}` 
    } 

    return this.http.get(url).map(res => res.json()); 
}