How do i display fetch api data in html?

Question

In this tutorial you’ll learn how to fetch data from a remote API and output that data into a HTML page. Learning to work with API’s is a handy skill to have as it allow’s you to build applications from data others have created.

Nội dung chính Show

How do I display fetched data in HTML?
How get data from API and show in HTML?
How do I show API response in HTML?
How do you get a fetch response in HTML?

The API we’ll be using is TheCocktailDB a free API with over 600 drink recipes that doesn’t require an account to get started. If cocktails aren’t your thing there’s also TheSportsDB, TheAudioDB, and TheMealDB, all of which are also free and publicly available.

We’ll be building a page that fetches a random cocktail like the following:

Let’s get started by creating a HTML file with the following markup:

html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Random Cocktail Recipetitle>
    <link href="style.css" rel="stylesheet" />
  head>
  <body>
    <div id="cocktail">div>
    <div id="overlay">div>
    <script src="script.js">script>
  body>
html>



Code language: HTML, XML (xml)

Next in the script.js file we’ll make our request using the Fetch API. Currently supported in all browsers excluding IE and Opera Mini, The Fetch API provides a simple interface for fetching HTTP resources.

fetch("https://www.thecocktaildb.com/api/json/v1/1/random.php")
  .then((response) => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error("NETWORK RESPONSE ERROR");
    }
  })
  .then(data => {
    console.log(data);
    displayCocktail(data)
  })
  .catch((error) => console.error("FETCH ERROR:", error));
Code language: JavaScript (javascript)

If the request was successful you’ll be able to view the data in the console:

How do i display fetch api data in html?

We can now pass this data to a function that will render it into the HTML. Create a displayCocktail() function in script.js. We’ll then declare variables for the data and the

used to output the data:

function displayCocktail(data) {
  const cocktail = data.drinks[0];
  const cocktailDiv = document.getElementById("cocktail");
  ...  
}   



Code language: JavaScript (javascript)

Now let’s output the data into our HTML starting with the cocktail name:

  ...
  const cocktailName = cocktail.strDrink;
  const heading = document.createElement("h2");
  heading.innerHTML = cocktailName;
  cocktailDiv.appendChild(heading);
  ...
Code language: JavaScript (javascript)

Next let’s get the image and also add it to the cocktail

. We’ll also use this image as the background for the :

  ...
  const cocktailImg = document.createElement("img");
  cocktailImg.src = cocktail.strDrinkThumb;
  cocktailDiv.appendChild(cocktailImg);
  document.body.style.backgroundImage = "url('" + cocktail.strDrinkThumb + "')";
  ...
Code language: JavaScript (javascript)

The ingredients are more difficult to output as they’re not stored in an array we can easily loop through. To get around this we’ll create an object and only add the ingredients that don’t have a null value:

We can then loop through these ingredients and output them into the ingredients unordered list:

  ...
  const cocktailIngredients = document.createElement("ul");
  cocktailDiv.appendChild(cocktailIngredients);  
  
  const getIngredients = Object.keys(cocktail)
    .filter(function (ingredient) {
      return ingredient.indexOf("strIngredient") == 0;
    })
    .reduce(function (ingredients, ingredient) {
      if (cocktail[ingredient] != null) {
        ingredients[ingredient] = cocktail[ingredient];
      }
      return ingredients;
    }, {});

  for (let key in getIngredients) {
    let value = getIngredients[key];
    listItem = document.createElement("li");
    listItem.innerHTML = value;
    cocktailIngredients.appendChild(listItem);
  }
  ...
Code language: JavaScript (javascript)

That concludes the JavaScript.

All that’s left to do is add the following CSS to the style.css file:

html {
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-size: cover;
  font-family: sans-serif;
}
#overlay {
  background: rgba(147, 135, 242, 0.9);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#cocktail {
  max-width: 350px;
  text-align: center;
  padding: 30px 30px 12px 30px;
  color: #fff;
  background-color: #7766d7;
  border: 4px solid #9387f2;
  border-radius: 5px;
}
#cocktail h2 {
  margin: 0 0 15px 0;
  text-transform: uppercase;
}
#cocktail img {
  max-width: 300px;
  border: 6px solid #fff;
  border-radius: 150px;
}
#cocktail ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#cocktail li {
  padding: 15px 0;
  font-size: 18px;
}
#cocktail li:not(:last-of-type) {
  border-bottom: 1px solid #fff;
}
Code language: CSS (css)

In this tutorial you learnt how to build a webpage that displays a random cocktail recipe from an API. If you would like to learn more about the Fetch API check out the MDN web docs.

How do I display fetched data in HTML?

A rough description of the syntax is that it is: 'let promise = fetch(url, [options]);', where the url is the url that is receiving the request and options are the options parameters that may be added (headers, body/payload, etc…).

How get data from API and show in HTML?

Approach: First make the necessary JavaScript file, HTML file and CSS file. Then store the API URL in a variable (here api_url). Define a async function (here getapi()) and pass api_url in that function. Define a constant response and store the fetched data by await fetch() method.

How do I show API response in HTML?

“how to display api response in html” Code Answer's.

const p = document. getElementById("myPelement").

fetch('http://example.com/movies.json').

. then((response) => {.

return response. json();.

. then((data) => {.

p. innerText = data..

How do you get a fetch response in HTML?

To get HTML content with the Javascript Fetch API, simply make a fetch() call to the script and return the result as text..

fetch("PAGE.HTML").

.then((result) => { return result.text(); }).

. then((content) => { document. getElementById("ID"). innerHTML = content; });.

programming html Fetch login javascript Fetch api table

How do i display fetch api data in html?

How do I display fetched data in HTML?

How get data from API and show in HTML?

How do I show API response in HTML?

How do you get a fetch response in HTML?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội