将复选框布尔值转换为文本并将其发送到 api 的获取请求中

Question

我有一个学校项目，我正在构建一个食谱搜索应用程序，前端使用 angular，后端使用 laravel，并从 edamams API 获取食谱。我希望能够使用一些复选框来过滤我的搜索，并将“真实”值转换为我放入搜索查询中的文本。我有一个对象，其中的属性是复选框，初始值为 false，选中时变为 true。

我如何将这个真值转换为像“&dishType=starter”这样的文本？以及如何检查我的对象中的某些属性是否为真，然后将文本发送到我的搜索查询？

这是我的搜索表单：

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

这是我的对象：

filter = {
    starter: false,
    main: false,
    dessert: false,
  };

我获取食谱的功能：

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

这是我在 recipe.service.ts 中的功能：

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

Answer 1

您始终可以使用

'' + booleanValue

或

'someString=' + booleanValue

将布尔值转换为字符串。

但在这种情况下，我不确定你的方向是否正确。 Angulars HttpClient 和 Laravel 将为您完成所有转换。您应该考虑发送 POST 请求。你要做的是创建一个包含你需要的所有参数的对象，并在后端镜像该对象。

所以你会有这样的东西：

filterObject = {
  starter: false,
  main: false,
  dessert: false,
  field: ['label', 'image', ...],
};

在您调用的服务中：

return this.httpClient.post<any>(
   `${this.urlConfig}/path-to-rest?api_id=1&api_key=2`, 
   filterObject
);

确保您使用 JSON 格式发送和接收。

Answer 2

要将复选框的真实值转换为可包含在搜索查询中的文本，您可以结合使用条件语句和字符串连接。以下是如何修改代码的示例：

更新过滤器对象以包含要映射到复选框真实值的文本值：

filter = {
  starter: false,
  main: false,
  dessert: false,
};

filterText = {
  starter: '&dishType=starter',
  main: '&dishType=main',
  dessert: '&dishType=dessert',
};

修改您的

getRecipes()

函数以检查复选框的值并将相应的筛选文本连接到您的搜索查询：

getRecipes() {
  this.loadRecipes = true; // Ignore
  this.recipeShow = false; // Ignore
  console.log(
    this.filter.starter,
    this.filter.main,
    this.filter.dessert,
  );

  // Concatenate the filter text based on the checkbox values
  let filterQuery = '';
  if (this.filter.starter) {
    filterQuery += this.filterText.starter;
  }
  if (this.filter.main) {
    filterQuery += this.filterText.main;
  }
  if (this.filter.dessert) {
    filterQuery += this.filterText.dessert;
  }

  this.recipeService
    .getRecipes(this.searchquery, filterQuery) // Pass the filter query to the service function
    .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;
    });
}

更新您的 recipe.service.ts 以在 URL 中包含过滤器查询参数：

getRecipes(q: string, filter: string) {
  let searchquery =
    this.urlConfig +
    '?type=public&q=' +
    q +
    '&app_id=' +
    this.appid +
    '&app_key=' +
    this.appkey +
    filter + // Include the filter query in the URL
    '&field=label' +
    '&field=idref' +
    '&field=image' +
    '&field=ingredientLines' +
    '&field=yield' +
    '&field=shareAs' +
    '&field=totalTime' +
    '&field=healthLabels' +
    '&field=dietLabels' +
    '&field=mealType' +
    '&field=dishType';
  return this.http.get<any>(searchquery, this.httpOptions);
}

通过这些修改，您的复选框的真实值将映射到搜索查询中相应的过滤器文本，并且在调用 API 以获取食谱时，过滤器文本将包含在 URL 中。