JS fetch post API Data in 5 min simple way

js fetch post API is very simple way. some line of Javascript code and boom.

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;
}
JS fetch post July 26, 2021

Ok now put css as you like and enjoy 😉

Previous Code

Simple jQuery Accordion Collapse

Custom coded Simple jQuery Accordion with toggle a ...

Next Code

Counter up with a simple jQuery

count down numbers with jquery ...

0 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

4 × two =

HTML img tag to HTML SVG tag [WordPress]

Image to SVG for WordPress. Generate svg code from ...

JS set interval for an event until element show

Sometimes we need to active an event when a specif ...

ACF

JavaScript

jQuery

Others

PHP

WooCommerce

WordPress

skype

Need Coding Help?

Connect Skype
top