What is the best way to create pages that showcase 10 posts each?

Question

What is the best way to create pages that showcase 10 posts each?

Currently, I am facing a challenge with displaying 100 posts using the Fetch API on one single page. I am looking for a way to create separate pages where each page would showcase only 10 posts.

Below is my existing JavaScript code:

      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;

});

You can view how the div posts appear here.

javascript html css

Answer 1

Answer №1

One way to accomplish this is by splicing the array and extracting only the first 10 elements using the splice method.

data = data.splice(0, 10);

Here is the complete code snippet:

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++;
    });
    document.getElementById('posts').innerHTML=output;

});

Another approach can be utilizing the pagination feature provided by jsonplaceholder, allowing you to fetch a specific number of posts based on the page number and limit specified in the query string parameters.

To achieve this, you can adjust your request URL as follows:

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

Below is the full code implementing this method:

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++;
    });
    document.getElementById('posts').innerHTML=output;

});

Answer 2

One way to accomplish this is by splicing the array and extracting only the first 10 elements using the splice method.

data = data.splice(0, 10);

Here is the complete code snippet:

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++;
    });
    document.getElementById('posts').innerHTML=output;

});

Another approach can be utilizing the pagination feature provided by jsonplaceholder, allowing you to fetch a specific number of posts based on the page number and limit specified in the query string parameters.

To achieve this, you can adjust your request URL as follows:

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

Below is the full code implementing this method:

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++;
    });
    document.getElementById('posts').innerHTML=output;

});

What is the best way to create pages that showcase 10 posts each?

Answer №1

Similar questions

Access AWS Lambda environment variables in Node.js using webpack

Combining JSON fields and searching based on the combined value within MarkLogic

Access the configuration of a web browser

Dealing with Errors When Working with Angular Promises

Repeated information displayed in modal pop-ups

What exactly does the combination of {on, attrs} create within Vue/Vuetify?

The alignment of the label button within the form-group is being set to the top

Managing absence of ID field in Prisma and retrieving data from API request

The value produced by the interval in Angular is not being displayed in the browser using double curly braces

ng-options do not refresh automatically when modifying elements in the array

Revising HTML content when Angular array is modified

Animating the maximum height causes a delay in the performance of other elements

Issue Encountered in NodeJS While Processing Multiple GET Requests

Authenticate yourself as a user or an organization on mongodb

Ways to update the div's color according to a specific value

Troubleshooting issue with multer code failing to save files in designated directory within nodejs server when using reactjs frontend

Incorporating ajax and jquery into html: Step-by-step guide

The Strapi plugin seems to be encountering an issue as the API is not reachable, leading to a

The middleware in Express.js is failing to execute the next function

Tips for looping through nested JSON data in Google Sheets