Fetching Recipes with TheMealDB and TheCocktailDB in JavaScript/

...

/

Search for a Cocktail Recipe or Ingredient

Search for a Cocktail Recipe or Ingredient

Learn how to use TheCocktailDB to search for the recipe of a cocktail or ingredient.

We'll cover the following...

Let’s assume that we had a great time at a party, and we loved a particular drink served. However, we can’t recall the precise name of the drink. TheCocktailDB API can help us search for the recipe of that drink. Along with a typical search, by using the name functionality, TheCocktailDB API allows searching for drinks using just their initials. This helps users find the recipe of a drink whose name they can’t recall.

Search drink or ingredient

We can search for the recipe of a cocktail or ingredient using the base URI, www.thecocktaildb.com/api/json/v1/1/search.php.

Request parameters

We can use these query parameters with this endpoint:

Parameters

Type

Category

Description

s

String

Optional

Used to search for the recipe of a cocktail using its name

f

Char

Optional

Used to get a list of cocktails using the first letter of the name of the cocktails

i

String

Optional

Used to search for an ingredient using 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 the recipe of a cocktail using its name. The widget below contains the code to search for a cocktail by its name.

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

Here is a brief explanation of the above code:

  • Line 1: We define the URL of the endpoint.

  • Lines 3–9: We define the query parameter and set the appropriate request type.

  • Lines 11–21: We define the searchDrink() function that calls the endpoint and prints the response.

  • Line 23: We call the searchDrink() function.

We can replace margarita in line 4 with the name of other cocktails if we want the recipe for any other cocktail.

We use the query parameter, f, with the base URL of the search endpoint to get a list of cocktails whose names start with a similar letter. The code below shows how to use this query parameter.

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

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

  • Line 4: We replace s with f.
  • Line 11: We change the name of the function to searchDrinks().

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

We can also search for an ingredient using its name. To do that, we use the query parameter, i. The code below shows how to search for an ingredient.

Javascript (babel-node)
const endpointUrl = new URL('https://www.thecocktaildb.com/api/json/v1/1/search.php');
const queryParameters = new URLSearchParams({
  i: 'vodka'
});
const options = {
  method: 'GET'
};
async function searchIngredient() {
  try {
    endpointUrl.search = queryParameters;
    const response = await fetch(endpointUrl, options);
    printResponse(response);
  } 
  catch (error) {
    printError(error);
  }
}
searchIngredient();

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

  • Line 4: We replace f with i.
  • Line 11: We change the name of the function to searchIngredient().

We can replace vodka in line 4 with any other ingredient we want to search for.

Response fields

The table below contains some important response fields:

Response field

Associated query parameter

Type

Description

idDrink

s, f

Integer

The API-assigned ID of the drink

strDrink

s, f

String

The name of the drink retrieved by this endpoint

strCategory

s, f

String

The category of the drink

strInstructions

s, f

String

The instructions to prepare the drink

strDrinkThumb

s, f

String

A link for the image of the drink

strIngredient1 - strIngredient15

s, f

String

The names of the required ingredients to make the drink

strMeasure1-strMeasure15

s, f

String

The amount of ingredients required to make the drink

idIngredient

i

Integer

The API-assigned ID of the ingredient

strIngredient

i

String

The name of the ingredient retrieved by this endpoint

strDescription

i

String

Information about the ingredient

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