I recently performed a search for my ionic app, which fetches data from an api using a http get method as shown below
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;
}
Currently, I have the id that the user inputs. Now, I aim to include filters in my search like ingredients, cuisine, and allergies. This involves extending the url with specific calls such as &allowedAllergy[] and allowedDiet[].
I have already implemented a list of items where each has a predetermined value. Clicking on one item will append it to the url provided, similar to how it is done on
<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>
Search Method
recipes: any;
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')
);
}
}
If you have any suggestions on how to go about implementing this, it would be greatly appreciated! Thanks in advance