How can I display 100 json data in HTML?-CodePudding

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.

CodePudding user response：

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)

CodePudding user response：

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();

CodePudding user response：

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 > ${d.title} </span></h3>
            <p><span > ${d.body} </span></p>
        </a>
        `
    })
   document.querySelector('body').innerHTML=content.join('');
}

getISS();

    <body>

    </body>

CodePudding user response：

Please pay attention to link of API endpoint you are calling-

const api_url='https://jsonplaceholder.typicode.com/posts/1';

You are telling, that you want to get post with id 1.

Try removing /1 from from api_url variable, so it will look like this:

const api_url='https://jsonplaceholder.typicode.com/posts';

Note that this will return JSON array of posts, so you may need to modify your javascript to display all posts that you are getting from the API.

Hope this helps.