JS Fetch Post API Data In 5 Min Simple Way

Fetch data from API is very simple in js. let’s begin the coding of js fetch post API data.

We will use JSONPlaceholder – Free Fake REST API (typicode.com)

1s we need have a markup with HTML like below

Markup for API data

<div role="status" id="loading">
    <div class="spinner-border">
        loading...
    </div>
</div>
<div class="post_area" id="posts"></div>

Now comes the main part of Javascript code to fetch api data. on API URL use your own API. in the loop your API maybe not provide data in the main variable. use console.log(list) to understand the data structure. You may need to use list.data or something else.

JS api fetching code

// api url
const api_url = "https://jsonplaceholder.typicode.com/users/1/posts";

// Defining async function
async function getapi(url) {
// Storing response
const response = await fetch(url);

// Storing data in form of JSON
var data = await response.json();
//   console.log(data);
if (response) {
    hideloader();
}
show(data);
}
// Calling that async function
getapi(api_url);

// Function to hide the loader
function hideloader() {
document.getElementById("loading").style.display = "none";
}
// Function to define innerHTML for HTML table
function show(list) {
let single_post = "";
// Loop to access all item
for (let n of list) {
    single_post += `<div class="single_post">
    <h4>${n.title}</h4>
    <p>${n.body}</p>
    </div>`;
}
// Setting innerHTML to push data inside posts div
document.getElementById("posts").innerHTML = single_post;
}