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

有很多方法可以实现这一目标。

方法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;

});

方法2：

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

为此，您可以像这样将一些查询字符串参数添加到您的请求中：

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;

});

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

1 个答案: