Muhammed's Blog

Dynamically render HTML by fetching data remotely

Use fetch API to render DOM elements

Introduction text, Markdown is supported here

What will we learn

In this guide, we will learn how to:

  • Use the fetch API to send a GET request to a remote endpoint
  • Parse JSON into a javascript object/array
  • Dynamically render HTML

Use Case

While we cannot list every use case, let us use the following example:
Assume you have an e-commerce site that needs to display products, each products represented by a card.
Before we move on, we need to design our card using HTML and CSS. Let’s go for something simple:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <title>My E-Shop</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div>
        <h1>Welcome!</h1>
        <div id="cards-container">
            <div class="card">
                <div id="card-img-wrapper">
                    <img class="card-img" src="https://i.dummyjson.com/data/products/26/5.jpg" alt="">
                </div>
                <h3>Cool product</h3>
                <p>$19.99</p>
                <div id="card-btn-wrapper">
                    <button class="card-btn">BUY</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

You should see this: screenshot-1