Fetching Recipes with TheMealDB and TheCocktailDB in JavaScript/

...

/

Search for a Recipe

Search for a Recipe

Learn how to use TheMealDB API to search for a recipe.

We'll cover the following...

We don't need to go through multiple categories to search for a recipe. TheMealDB API provides an endpoint through which we can search for a meal using its name.

Search for a meal

TheMealDB API provides an endpoint to search for the recipe of any meal from the database. We can search for a recipe using the base URI, www.themealdb.com/api/json/v1/1/search.php. We’ll get information about the meal and how we can make it.

Request parameters

We can use the following query parameters with this endpoint:

Parameters

Type

Category

Description

s

String

Optional

Used to search for a meal using its name

f

String

Optional

Used to search for a meal using the first letter of its name

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, s, to search for a meal using its name, as shown below.

Press + to interact
Javascript (babel-node)
const endpointUrl = new URL('https://www.themealdb.com/api/json/v1/1/search.php');
const queryParameters = new URLSearchParams({
  s: 'Arrabiata'
});
const options = {
  method: 'GET'
};
async function searchMeal() {
  try {
    endpointUrl.search = queryParameters;
    const response = await fetch(endpointUrl, options);
    printResponse(response);
  } 
  catch (error) {
    printError(error);
  }
}
searchMeal();

A brief explanation of the above code is given below:

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

We can replace Arrabiata in line 4 with the name of any other meals we want.

We use the query parameter, f, with the base URL of this endpoint, to get a list of meals using alphabets. The code below shows how we can use this query parameter.

Press + to interact
Javascript (babel-node)
const endpointUrl = new URL('https://www.themealdb.com/api/json/v1/1/search.php');
const queryParameters = new URLSearchParams({
  f: 'a'
});
const options = {
  method: 'GET'
};
async function searchMeals() {
  try {
    endpointUrl.search = queryParameters;
    const response = await fetch(endpointUrl, options);
    printResponse(response);
  } 
  catch (error) {
    printError(error);
  }
}
searchMeals();

Let’s look at how we’ve changed the code:

  • Line 4: We replace s with f as a query parameter.
  • Line 11: We change the name of the function to searchMeals().

We can replace a in line 4 with any other letter to get a different list of meals.

Response fields

The table below contains some important response fields:

Response field

Type

Description

idMeal

Integer

The API assigned ID of the meal

strMeal

String

The name of the meal retrieved by this endpoint

strCategory

String

The category of the meal

strInstructions

String

The instructions to prepare the meal

strMealThumb

String

A link for the image of the meal

strIngredient1 - strIngredient20

String

The names of the required ingredients to make the meal

strMeasure1-strMeasure20

String

The amount of ingredients required to make the meal

Note: The value of some of the response objects might be null depending on the availability of the data.

Ask