Search⌘ K
Home/
Courses/
Plan Meals and Recipes with the Spoonacular API in JavaScript

Recipe Nutrition Widget

Learn how to fetch interactive Spoonacular widgets that display the nutritional data for recipes.

We'll cover the following...

We can use the Spoonacular API to fetch widgets that display recipes’ nutritional values in an interactive way. To do so, we can use the following endpoints based on our use case:

  • recipe nutrition label widget

  • recipe nutrition widget

  • recipe nutrition by ID widget

We can use one of the following recipe IDs for any code widgets in this lesson that require one:

Recipe IDs

Recipe Name

ID

Classic Fruit Salad

639600

Tex-Mex Burger

663050

Baked Sirloin Steak

633790

Vegan Chana Masala Curry

1096306

Belgian Hot Chocolate

634818

The recipe nutrition label widget endpoint

The recipe nutrition label widget endpoint takes in the ID of a recipe as a path parameter and fetches a widget that displays the nutrition label for a recipe. The recipe nutrition label widget endpoint has a cost of 11quota point. This endpoint utilizes the GET method and uses the following URL:

GET https://api.spoonacular.com/recipes/{id}/nutritionLabel

Here are the request parameters we can use with the recipe nutrition label widget endpoint:

Request Parameters

Parameter

Type

Category

Description

id

Number

Required

The identifier of the recipe for which we’re fetching the label widget.

defaultCss

Boolean

Optional

The option, if set to true, adds the default CSS to the response. The default value of this parameter is true.

showOptionalNutrients

Boolean

Optional

The option, if set to true, shows optional nutrients in the response. The default value of this parameter is false.

showZeroValues

Boolean

Optional

The option, if set to true, shows zero values in the response. The default value of this parameter is false.

showIngredients

Boolean

Optional

The option, if set to true, shows a list of ingredients in the response. The default value of this parameter is false.

Let’s see how to call the API endpoint. Click the “Run” button to execute the code. Please provide the value for RECIPE_ID.

Javascript (babel-node)
// Importing libraries here
import fetch from 'node-fetch';
// Define the ID of any recipe here
const id = '{{RECIPE_ID}}';
// Define endpoint URL here
const endpointUrl = new URL(`https://api.spoonacular.com/recipes/${id}/nutritionLabel`);
// Define API key here
const apiKey = '{{API_KEY}}';
// Define Header Parameters here
const headerParameters = {
  'x-api-key': apiKey,
  'content-type': 'text/html',
};
// Define Query Parameters here
const queryParameters = new URLSearchParams({
  defaultCss: true,
});
// Setting API call options
const endpointOptions = {
  method: 'GET',
  headers: headerParameters,
};
// Function to make API call
async function recipeNutritionLabelWidget(url, options) {
  try {
    // Using the fetch method to make an API call to Spoonacular 
    const response = await fetch(url, options);
    // Custom function for printing the API response
    printResponse(response);
  } catch (error) {
    // Custom function for printing the error message
    printError(error);
  }
}
// Attaching query parameters to the endpoint URL
endpointUrl.search = queryParameters;
// Calling function to make API call
recipeNutritionLabelWidget(endpointUrl, endpointOptions);

Take a look at the following explanation of the code above:

  • Line 5: We set and store the ID of a recipe for which we want to fetch the label widget.

  • Line 8: We use the endpoint URL /recipes/{id}/nutritionLabel to fetch the Spoonacular widget that displays a nutritional label.

  • Line 11: We assign the API key here to the apiKey variable.

  • Lines 14–17: We define the header parameters for the API call. We can modify or add parameters using the headerParameters variable.

    • Line 15: We pass the apiKey variable to the x-api-key header parameter.

    • Line 16: We need to set the content-type header parameter to text/html.

  • Lines 20–22: We define the query parameters for the API call. We can modify or add parameters using the queryParameters variable.

The recipe nutrition widget endpoint

The recipe nutrition widget endpoint fetches a widget that displays the nutritional data for a recipe in an interactive way. The recipe nutrition widget endpoint has a cost of 11quota point. However, there’s no quota point if the showBacklink parameter is set to true. This endpoint utilizes the GET method and uses the following URL:

POST https://api.spoonacular.com/recipes/visualizeNutrition

Here are the request parameters we can use with the recipe nutrition widget endpoint:

Request Parameters

Parameter

Type

Category

Description

ingredientList

String

Required

The list of ingredients of the recipe with each ingredient on a new line with the ingredient amount. Here’s an example:

chocolate

2 cups of coffee

1.4 liters almond milk

We need to pass this parameter in the request body rather than as a query or path parameter.

servings

Number

Optional

The number of the recipe’s servings. We need to pass this parameter in the request body rather than as a query or path parameter.

defaultCss

Boolean

Optional

The option, if set to true, adds the default CSS to the response. The default value of this parameter is true. We need to pass this parameter in the request body rather than as a query or path parameter.

showBacklink

Boolean

Optional

The option, if set to true, shows a backlink to Spoonacular, and there’s no quota cost. The default value of this parameter is true. We need to pass this parameter in the request body rather than as a query or path parameter.

language

String

Optional

The input language of the response. It can be either en or de. The default value of this parameter is en. We need to pass this parameter as a query or path parameter.

Let’s see how to call the API endpoint. Click the “Run” button to execute the code.

Javascript (babel-node)
// Define endpoint URL here
const endpointUrl = new URL(`https://api.spoonacular.com/recipes/visualizeNutrition`);
// Define Header Parameters here
const headerParameters = {
  'x-api-key': apiKey,
  'accept': 'text/html',
  'content-type': 'application/x-www-form-urlencoded',
};
// Define Query Parameters here
const queryParameters = new URLSearchParams({
  language: 'en',
});
// Define Body Parameters here
const bodyParameters = {
  ingredientList: '1 apple\n \
                   1 cup of olive oil\n \
                   1.4 liters milk\n \
                   2 1/2 salmon fillets\n \
                   kale',
  servings: 3,
  defaultCss: true,
}
// Converting body parameters as form data
const bodyFormData = new URLSearchParams();
for (key in bodyParameters) {
  bodyFormData.append(key, bodyParameters[key])
}
// Setting API call options
const endpointOptions = {
  method: 'POST',
  headers: headerParameters,
  body: bodyFormData,
};
// Attaching query parameters to the endpoint URL
endpointUrl.search = queryParameters;
// Calling function to make API call
recipeNutritionWidget(endpointUrl, endpointOptions);

Take a look at the following explanation of the code above:

  • Line 2: We use the endpoint URL /recipes/visualizeNutrition to fetch the Spoonacular widget that displays the nutritional data for a recipe in an interactive way.

  • Lines 5–9: We define the header parameters for the API call. We can modify or add parameters using the headerParameters variable.

    • Line 7: We need to set the accept header parameter to text/html.

    • Line 8: We need to set the content-type header parameter to application/x-www-form-urlencoded.

  • Lines 12–14: We define the query parameters for the API call. We can modify or add parameters using the queryParameters variable.

  • Lines 17–25: We define the body parameters for the API call. We can modify or add parameters using the bodyParameters variable.

The recipe nutrition by ID widget endpoint

The recipe nutrition by ID widget endpoint takes in the ID of a recipe as a path parameter and fetches a widget that displays the nutritional data for a recipe in an interactive way. The recipe nutrition by ID widget endpoint has a cost of 11quota point. This endpoint utilizes the GET method and uses the following URL:

GET https://api.spoonacular.com/recipes/{id}/nutritionWidget

Here are the request parameters we can use with the recipe nutrition by ID widget endpoint:

Request Parameters

Parameter

Type

Category

Description

id

Number

Required

The identifier of the recipe for which we’re fetching the nutrition widget.

defaultCss

Boolean

Optional

The option, if set to true, adds the default CSS to the response. The default value of this parameter is true.

Let’s see how to call the API endpoint. Click the “Run” button to execute the code. Please provide the value for RECIPE_ID.

Javascript (babel-node)
// Define the ID of any recipe here
const id = '{{RECIPE_ID}}';
// Define endpoint URL here
const endpointUrl = new URL(`https://api.spoonacular.com/recipes/${id}/nutritionWidget`);
// Define Header Parameters here
const headerParameters = {
  'x-api-key': apiKey,
  'accept': 'text/html',
};
// Define Query Parameters here
const queryParameters = new URLSearchParams({
  defaultCss: true,
});
// Setting API call options
const endpointOptions = {
  method: 'GET',
  headers: headerParameters,
};
// Attaching query parameters to the endpoint URL
endpointUrl.search = queryParameters;
// Calling function to make API call
recipeNutritionWidget(endpointUrl, endpointOptions);

Take a look at the following explanation of the code above:

  • Line 2: We set and store the ID of a recipe for which we want to fetch the nutrition widget.

  • Line 5: We use the endpoint URL /recipes/{id}/nutritionWidget to fetch the Spoonacular widget that displays the nutritional data for the recipe in an interactive way.

  • Lines 8–11: We define the header parameters for the API call. We can modify or add parameters using the headerParameters variable.

    • Line 10: We need to set the accept header parameter to text/html.

  • Lines 14–16: We define the query parameters for the API call. We can modify or add parameters using the queryParameters variable.