javascript - 我如何制作页面，每个页面包含 10 个帖子？

Question

我有 100 篇关于 Fetch API 的文章，我把它们全部放在同一个页面上。 我不知道如何制作每个页面只能显示 10 个帖子的页面。

那是我的 javascript 代码:

      fetch('https://jsonplaceholder.typicode.com/posts')
       .then((res)=>res.json())
       .then((data)=>{
       let output = '<h2 class="posts"></h2>';
       let i=0;
       data.forEach(function(thePost){
        output += `
         <div style="background-color: gray;margin- 
       right:60px;width:300px;height:350px;border-radius: 30px;display: 
       inline-block;overflow: hidden;"  class="post" id=item${i}>
          <h3 style="padding:10px;color:white;">${thePost.title}</h3>
          <p style="padding:10px;color:white;">${thePost.body}</p>
        </div>
      `;
      i++;
      //if (i==3){`<br> <br>`}
    });
    document.getElementById('posts').innerHTML=output;

});

这些是 div 帖子:

Answer 1

有很多方法可以实现。

方式一

可以用splice方法拼接数组，只获取前10个元素

data = data.splice(0, 10);

完整代码

fetch('https://jsonplaceholder.typicode.com/posts')
       .then((res)=>res.json())
       .then((data)=>{
       let output = '<h2 class="posts"></h2>';
       let i=0;
       data = data.splice(0, 10);
       data.forEach(function(thePost){
        output += `
         <div style="background-color: gray;margin- 
       right:60px;width:300px;height:350px;border-radius: 30px;display: 
       inline-block;overflow: hidden;"  class="post" id=item${i}>
          <h3 style="padding:10px;color:white;">${thePost.title}</h3>
          <p style="padding:10px;color:white;">${thePost.body}</p>
        </div>
      `;
      i++;
      //if (i==3){`<br> <br>`}
    });
    document.getElementById('posts').innerHTML=output;

});

方式二:

您可以使用 jsonplaceholder 提供的分页，它允许您在给定的 page 上只获得 n 个帖子。

为此，您可以像这样向您的请求添加一些查询字符串参数:

https://jsonplaceholder.typicode.com/posts?_page=0&_limit=10

完整代码

fetch('https://jsonplaceholder.typicode.com/posts?_page=0&_limit=10')
       .then((res)=>res.json())
       .then((data)=>{
       let output = '<h2 class="posts"></h2>';
       let i=0;
       data.forEach(function(thePost){
        output += `
         <div style="background-color: gray;margin- 
       right:60px;width:300px;height:350px;border-radius: 30px;display: 
       inline-block;overflow: hidden;"  class="post" id=item${i}>
          <h3 style="padding:10px;color:white;">${thePost.title}</h3>
          <p style="padding:10px;color:white;">${thePost.body}</p>
        </div>
      `;
      i++;
      //if (i==3){`<br> <br>`}
    });
    document.getElementById('posts').innerHTML=output;

});