Fetch Available Listings

Learn how to get the lists of available categories, glasses, ingredients, and alcoholic filters.

We'll cover the following

TheCocktailDB API includes a number of filters that we may use to narrow down all the available cocktails. In this session, we’ll look at how to get the listings with values that may be used to filter the cocktails.

Retrieve lists

TheCocktailDB API provides us with an endpoint to get the lists of items that can be used to filter the cocktails. The base URI of this endpoint is https://www.thecocktaildb.com/api/json/v1/1/list.php. This endpoint provides four types of lists:

  1. Categories list
  2. Glasses list
  3. Ingredients list
  4. Alcoholic filters list

Request parameters

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

Parameters

Type

Category

Description

c

String

Optional

Used to get all the available categories

g

String

Optional

Used to fetch all the available glasses in the database

i

String

Optional

Used to get all available ingredients from the database

a

String

Optional

Used to retrieve the list of available alcoholic filters

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

Each drink provided by the API falls in a specific category. We can use the query parameter, c, to get the list of available categories. The value assigned to c will be list. The widget below contains the code which fetches this list.

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

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 HTTP request type to call the endpoint.
  • Lines 11–21: We define the fetchLists() function that calls the endpoint and prints the response.
  • Line 23: We call the fetchLists() function.

We can also use the glass type, which is used to serve the drink, as a filter. To get the list of available glasses, replace the query parameter c in line 4 with g.

The query parameter, i, when combined with https://www.thecocktaildb.com/api/json/v1/1/list.php, provides us with the list of available ingredients in the database. The value of i is list. The code below demonstrates how we can get the list of available ingredients.

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

We’ve replaced the query parameter c in line 4 with i.

We can also filter the drinks based on whether they are alcoholic or not. We can get the list of alcoholic filters by replacing i in line 4 with a.

Response fields

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

Response field

Associated query parameter

Type

Description

strCategory

c

String

The name of the category, which can be used to filter specific types of drinks.

strGlass

g

String

The name of the glass retrieved by this endpoint

strIngredient1

i

String

The name of the ingredient provided by the API

strAlcoholic

a

String

The name of the alcoholic filter