Ok I'm trying to consume a simple API and loop through all the data I received and display it on html. I'm stumbling on something simple and I cannot figure out where I'm making the mistake.
Currently I get the data with fetch, however when I try to display that data on html I'm just getting the very first object in the array not all the objects.
I will like to get a list of all the posts in my html.
Thanks in advance
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status" id="loading">
<span class="sr-only">Loading...</span>
</div>
</div>
<h1>List of Posts</h1>
<section id="section">
<ul id='posts'></ul>
</section>
</body>
<script>
const API_URL = `https://jsonplaceholder.typicode.com`
async function fetchPosts() {
const response = await fetch(`${API_URL}/posts`)
let data = await response.json()
// console.log(data)
if (response) {
hideloader();
}
show(data)
}
function hideloader() {
document.getElementById('loading').style.display = 'none';
}
function show(data) {
console.log(data, ' inside show')
const ul = document.getElementById('posts')
const list = document.createDocumentFragment();
let li = document.createElement('li');
let title = document.createElement('h1');
let body = document.createElement('p')
data.map(function (post) {
title.innerHTML = `${post.title}`;
body.innerHTML = `${post.body}`;
li.appendChild(title);
li.appendChild(body);
list.appendChild(li);
// console.log(list)
// console.log(li)
})
ul.appendChild(list);
}
fetchPosts()
</script>
</html>In the show(data) function, when you map the data, the title.innerHTML and body.innerHTML are reassigned constantly.
You should create the list title and body elements in the iteration.
function show(data) {
const ul = document.getElementById('posts');
const list = document.createDocumentFragment();
data.map(function (post) {
let li = document.createElement('li');
let title = document.createElement('h1');
let body = document.createElement('p');
title.innerHTML = `${post.title}`;
body.innerHTML = `${post.body}`;
li.appendChild(title);
li.appendChild(body);
list.appendChild(li);
});
ul.appendChild(list);
}