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

recipe taste widget
recipe taste by ID widget

Request Parameters

Parameter	Type	Category	Description
`ingredientList`	String	Required	The list of ingredients of the recipe where each ingredient is 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.
`normalize`	Boolean	Optional	The option, if set to `true`, normalizes the results according to the strongest taste. The default value of this parameter is `false`. We need to pass this parameter in the request body rather than as a query or path parameter.
`rgb`	Boolean	Optional	The red, green, and blue values for the widget’s chart color. The default RGB value is `75,192,192`. 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.

Javascript (babel-node)

// Define endpoint URL here
const endpointUrl = new URL(`https://api.spoonacular.com/recipes/visualizeTaste`);
// Define API key here
const apiKey = '{{API_KEY}}';
// 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',
  normalize: 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,
};
// Function to make API call
async function recipeTasteWidget(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
recipeTasteWidget(endpointUrl, endpointOptions);

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

Line 2: We use the endpoint URL /recipes/visualizeTaste to fetch the Spoonacular widget that displays the taste data for a recipe in an interactive way.
Line 5: We assign the API key here to the apiKey variable.
Lines 8–12: We define the header parameters for the API call. We can modify or add parameters using the headerParameters variable.
- Line 9: We pass the apiKey variable to the x-api-key header parameter.
- Line 10: We need to set the accept header parameter to text/html.
- Line 11: We need to set the content-type header parameter to application/x-www-form-urlencoded.
Lines 15–17: We define the query parameters for the API call. We can modify or add parameters using the queryParameters variable.
Lines 20–27: We define the body parameters for the API call. We can modify or add parameters using the bodyParameters variable.

The recipe taste by ID widget endpoint

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

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}/tasteWidget`);
// Define Header Parameters here
const headerParameters = {
  'x-api-key': apiKey,
  'accept': 'text/html',
};
// Define Query Parameters here
const queryParameters = new URLSearchParams({
  normalize: 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
recipeTasteWidget(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 taste widget.
Line 5: We use the endpoint URL /recipes/{id}/tasteWidget to fetch the Spoonacular widget that displays the taste 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.

Recipe Name	ID
Classic Fruit Salad	639600
Tex-Mex Burger	663050
Baked Sirloin Steak	633790
Vegan Chana Masala Curry	1096306
Belgian Hot Chocolate	634818

1.Introduction

2.Recipes

3.Ingredients

4.Grocery Products

5.Spoonacular Widgets

6.Spoonacular API Integration in React

7.Conclusion

8.Appendix

Recipe Taste Widget

Recipe IDs

The recipe taste widget endpoint

Request Parameters

The recipe taste by ID widget endpoint

Request Parameters