Filter Meals

Learn how to filter the meals to get lists of specific types of meals.

We'll cover the following

Filtering allows us to group resources using different conditions. This makes it easier for the user to get a specific type of resource. In this lesson, we’ll look at how to use the filters provided by TheMealDB to fetch information about specific types of meals.

Use available filters

The base URI, https://www.themealdb.com/api/json/v1/1/filter.php, provides us with the names, IDs, and the link for the images of meals. We can use the information obtained from this endpoint to search for the recipes for the meals.

We use these criteria to filter the meals:

  • Categories
  • Cuisines
  • Ingredients

Request parameters

We can use the following query parameters with this endpoint:

Parameters

Type

Category

Description

c

String

Optional

Used to filter meals using the categories

a

String

Optional

Used to fetch a list of meals from a specific cuisine

i

String

Optional

Used to get a list of meals in which a specific ingredient is used

We can use the endpoint discussed in the previous lesson to get all the available categories, cuisines, and ingredients.

Note: We need to use at least one of these parameters with this endpoint. Calling it without any query parameters will return an error.

We use the query parameter, c, to get the lists of all available meals that fall into a specific category.

Press + to interact
const endpointUrl = new URL('https://www.themealdb.com/api/json/v1/1/filter.php');
const queryParameters = new URLSearchParams({
  c: 'Seafood'
  // a: 'Canadian'
  // i: 'Chicken'
});
const options = {
  method: 'GET'
};
async function fetchFilteredMeals() {
  try {
    endpointUrl.search = queryParameters;
    const response = await fetch(endpointUrl, options);
    printResponse(response);
  } 
  catch (error) {
    printError(error);
  }
}
fetchFilteredMeals();

A brief explanation of the above code is given as follows:

  • Line 1: We define the URL of the endpoint.
  • Lines 3–11: We define the query parameter and HTTP request type to call the endpoint.
  • Lines 13–23: We define the fetchFilteredMeals() function that calls the endpoint and prints the response.
  • Line 25: We call the fetchFilteredMeals() function.

We can replace Seafood in line 4 with any other category to get the list of meals that fall under that category.

We can use the query parameter, a ,to get the lists of available meals for a specific cuisine. Let’s use this parameter to get the list of available Canadian meals. To do this, comment out line 4 and uncomment line 5 in the code. We can change the cuisine in line 5 to get meals from another area.

Similarly, we can filter meals based on the ingredients. For that, we use the query parameter, i. Comment out other query parameters and uncomment line 6 in the code to get chicken meals. We can change chicken in line 6 with another ingredient to get a different list.

Response fields

Following are some important response fields provided by this endpoint:

Response field

Type

Description

strMeal

String

The name of the meal

strMealThumb

String

A link for the image of the meal.

idMeal

Integer

The API-assigned ID of the meal, it can be used to fetch the recipe of the meal.