Currently, I am working on a school project that involves creating a recipe search application using Angular for the frontend and Laravel for the backend. The application fetches recipes from the Edamam API. I am looking to implement a feature where users can filter their searches using checkboxes and translate the "true" value to a specific text that I define in the search query. I have an object with checkbox properties that are initially set to false but change to true when checked.
My main questions are: How can I convert the true value to a text like "&dishType=starter"? and how do I determine if some of the properties in my object are true so I can append the corresponding text to my search query?
Below is the structure of my search form:
<input id="search-box" type="text" (keyup.enter)="getRecipes()" [(ngModel)]="searchquery">
<label for="starter" class="filter">
<input class="filter-checkbox" type="checkbox" id="starter" [(ngModel)]="filter.starter">
<span> Starter</span>
</label>
<label for="main" class="filter">
<input class="filter-checkbox" type="checkbox" id="main" [(ngModel)]="filter.main">
<span> Main</span>
</label>
<label for="dessert" class="filter">
<input class="filter-checkbox" type="checkbox" id="dessert" [(ngModel)]="filter.dessert">
<span class="checkbox-text">Dessert</span>
</label>
<button type="button" (click)="getRecipes();">Search</button>
Here is the object storing the checkbox values:
filter = {
starter: false,
main: false,
dessert: false,
};
Below is the function responsible for retrieving the recipes:
getRecipes() {
this.loadRecipes = true; // Ignore
this.recipeShow = false; // Ignore
console.log(
this.filter.starter,
this.filter.main,
this.filter.dessert,
);
this.recipeService
.getRecipes(this.searchquery, // Here is where i want to put the filter values)
.subscribe((result) => {
this.recipeShow = true; // Ignore
this.loadRecipes = false; // Ignore
let searchedWord = this.searchquery; // Ignore
let recipes = result.hits.map((data: any) => {
let recipe = data.recipe;
recipe.idref = data._links.self.href.slice(38, 70);
return recipe;
});
this.allRecipes = recipes;
this.word = searchedWord;
});
}
Lastly, here is the function in my recipe.service.ts file:
getRecipes(q: string, filter: string) {
let searchquery =
this.urlConfig +
'?type=public&q=' +
q +
'&app_id=' +
this.appid +
'&app_key=' +
this.appkey +
filter +
'&field=label' +
'&field=idref' +
'&field=image' +
'&field=ingredientLines' +
'&field=yield' +
'&field=shareAs' +
'&field=totalTime' +
'&field=healthLabels' +
'&field=dietLabels' +
'&field=mealType' +
'&field=dishType' +
'&field=cuisineType';
return this.http.get<any>(searchquery, this.httpOptions);
}