Grocery Product Nutrition Widget

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

We'll cover the following

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

  • product nutrition label widget
  • product nutrition by ID widget

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

Recipe IDs

Product Name

ID

Hershey’s Milk Chocolate Bar

4596062

Papetti's Peeled Refrigerated Hard Cooked Eggs

5241240

Lupina Lupin Flour

595371

Nando's PERi PERi Spicy Hot Sauce

3501926

Pita Breads

4679182

The product nutrition label widget endpoint

The product nutrition label widget endpoint takes in the ID of a product as a path parameter and fetches a widget that displays the nutrition label for that product. The product 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/food/products/{id}/nutritionLabel

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

Request Parameters

Parameter

Type

Category

Description

id

Number

Required

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

defaultCss

Boolean

Optional

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

showOptionalNutrients

Boolean

Optional

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

showZeroValues

Boolean

Optional

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

showIngredients

Boolean

Optional

The option shows a list of ingredients in the response if set to true. 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 PRODUCT_ID if you haven’t already.

Press + to interact
// Importing libraries here
import fetch from 'node-fetch';
// Define the ID of any product here
const id = '{{PRODUCT_ID}}';
// Define endpoint URL here
const endpointUrl = new URL(`https://api.spoonacular.com/food/products/${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 productNutritionLabelWidget(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
productNutritionLabelWidget(endpointUrl, endpointOptions);

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

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

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

  • 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 product nutrition by ID widget endpoint

The product nutrition by ID widget endpoint takes in the ID of a product as a path parameter and fetches a widget that displays the nutritional data for that product in an interactive way. The product 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/food/products/${id}/nutritionWidget

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

Request Parameters

Parameter

Type

Category

Description

id

Number

Required

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

defaultCss

Boolean

Optional

The option adds the default CSS to the response if set to true. 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 PRODUCT_ID if you haven’t already.

Press + to interact
// Define the ID of any product here
const id = '{{PRODUCT_ID}}';
// Define endpoint URL here
const endpointUrl = new URL(`https://api.spoonacular.com/food/products/${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
productNutritionWidget(endpointUrl, endpointOptions);

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

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

  • Line 5: We use the endpoint URL /food/products/{id}/nutritionWidget to fetch the Spoonacular widget that displays the nutritional data for the product 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.