Starting from scratch with html, css, and javascript, I've embarked on a basic learning project. Within this project, I plan to create two main pages: a list page and a detail page. The list page will showcase posts on the html screen, featuring only the title and body of each post. To achieve this, I am fetching post data from https://jsonplaceholder.typicode.com/posts
Here is my HTML code for the list page:
<!DOCTYPE html>
<html>
<head>
<script src="fetch.js"></script>
<title>List</title>
</head>
<body>
<a>
<h3><span id="title"> </span></h3>
<p><span id="body"></span></p>
</a>
</body>
</html>
As for my javascript code:
const api_url='https://jsonplaceholder.typicode.com/posts/1';
async function getISS(){
const response = await fetch(api_url);
const data= await response.json();
const { title, body } = data;
document.getElementById('title').textContent=title;
document.getElementById('body').textContent=body;
}
getISS();
The current implementation solely displays the post with ID number 1 as demonstrated in this output. My question now is how do I proceed to list all post titles and bodies? Do I need to implement some form of loop to achieve this task considering there are 100 posts in the JSON dataset that I wish to display?