Блог

У меня есть 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:

Есть много способов добиться этого.

Способ 1

Вы можете объединить массив и получить только первые 10 элементов с помощью splice метода

 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=0amp;_limit=10
  

Полный код

 fetch('https://jsonplaceholder.typicode.com/posts?_page=0amp;_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;

});