I am new to html, css and javascript and I am making a basic project to learn. I will have 2 pages:list page and detail page. In list page, I need to display posts on the html screen. I only display the title and body of the posts to the screen. I need to fetch the post datas from https://jsonplaceholder.typicode.com/posts
My HTML code for 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>
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();
this code only displays the post with id number 1 as you see here: output
How can I list all the posts title and body? Should I use loop for it? There is 100 post in the JSON and I need to display all of this posts titles and bodies.
The way I do this in React is by using the map method on the data array. You can do the same thing with JavaScript and HTML. Essentially you want to map over the data array and for each element you want to create a new element. Something like this:
const posts = [{name: "first", id: 1}, {name: "second", id: 2}]
posts.map((post) => //create the element);
Since you're using an API, posts would just be the response you get from the API (which should be an array)
try this js:
async function getISS() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const res = await response.json();
let anstitle = '';
let ansbody = '';
res.map((item) => {
anstitle += item.title;
ansbody += item.body;
})
document.getElementById('title').textContent = anstitle;
document.getElementById('body').textContent = ansbody;
}
getISS();
const api_url='https://jsonplaceholder.typicode.com/posts/';
async function getISS(){
const response = await fetch(api_url);
const data= await response.json();
const { title, body } = data;
let content = data.map((d,i)=> {
return`<a>
<span> post: ${+i+1} <span>
<h3><span class="title"> ${d.title} </span></h3>
<p><span class="body"> ${d.body} </span></p>
</a>
`
})
document.querySelector('body').innerHTML=content.join('');
}
getISS(); <body>
</body>