Filter Cocktails

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

We'll cover the following

TheCocktailDB API's filters make it possible to find a drink among hundreds of available options. In this lesson, we'll look at how we can use these filters.

The base URI https://www.thecocktaildb.com/api/json/v1/1/filter.php is used to filter drinks. It provides us with the names, IDs, and the link for the image of cocktails. We can use the information obtained from this endpoint to search for the recipes for various cocktails.

We can use any of the following four filters to get this information:

  • Category of cocktail
  • Type of glass
  • Ingredients used
  • Alcohol content

Request parameters

We can use any one of the following query parameters with this endpoint:

Parameters

Type

Category

Description

c

String

Optional

Used to filter cocktails using the category

g

String

Optional

Used to get the list of cocktails served in the specified type of glass

a

String

Optional

Used to retrieve a list of cocktails based on whether the cocktails are alcoholic or not

i

String

Optional

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

We can use the endpoint discussed in the previous lesson to get the input data for these query parameters.

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 cocktails that fall into a specific category. The code below demonstrates how we can get cocktails for a specific category.

Press + to interact
const endpointUrl = new URL('https://www.thecocktaildb.com/api/json/v1/1/filter.php');
const queryParameters = new URLSearchParams({
  c: 'Ordinary_Drink'
  // g: 'Champagne_flute'
});
const options = {
  method: 'GET'
};
async function fetchFilteredDrinks() {
  try {
    endpointUrl.search = queryParameters;
    const response = await fetch(endpointUrl, options);
    printResponse(response);
  } 
  catch (error) {
    printError(error);
  }
}
fetchFilteredDrinks();

A brief explanation of the above code is as follows:

  • Line 1: We define the URL of the endpoint.
  • Lines 3–10: We define the query parameter and set the appropriate request type.
  • Lines 12–22: We define the fetchFilteredDrinks() function that calls the endpoint and prints the response.
  • Line 24: We call the fetchFilteredDrinks() function.

We can replace Ordinary_Drink in line 4 with any other category to get the list of cocktails that fall in that category.

Similarly, to get the list of all available cocktails served in a specific type of glass, we use the query parameter g. To use this parameter, comment out line 4 and uncomment line 5 in the above code. We can change Champagne_flute in this line to get a list of drinks served in other glasses.

Using the query parameter, i, with this endpoint, we can get the list of cocktails based on the ingredients used in them. The code below uses this query parameter with the www.thecocktaildb.com/api/json/v1/1/filter.php base URL.

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

The code is the same as in the last widget, aside from the query parameters.

We can replace Gin in line 4 with any other ingredient to get a list of the cocktails in which that ingredient is used.

We can also search for a list of alcoholic or non-alcoholic cocktails using this endpoint. For that, we use the query parameter a with it. To use this parameter, comment out line 4 and uncomment line 5 in the above code. We can replace Alcoholic with Non_alcoholic to get the list of non-alcoholic drinks.

Response fields

The table below contains the important response fields returned in the drinks array:

Response field

Type

Description

strDrink

String

The name of the cocktail

strDrinkThumb

String

A link for the image of the cocktail

idDrink

Integer

The API-assigned ID of the cocktail,we can use it to fetch the recipe for the cocktail.