I need to display 5 items at a time from my JSON.

Question

0.00/5 (No votes)

See more:

I am creating a vertical timeline project. On each side I show a card with info from my JSON file. I need to show only 5 cards at a single time. I will need two buttons:

The first button will need to show the next 5 cards (Can keep clicking until the last item in the JSON) The JSON will vary in size so it will have to be dynamic and take in account for all items

The second button will need to show the previous 5 cards (Can keep clicking until initial state)

I have a button already with the class ".show-next", and another button with the class ".show-previous"

This is my code currently:

JavaScript

  $.ajax({
    method: "GET",
    url: "./timeline.json",
  }).done(function (data) {
    const obj = data;
    Object.entries(obj).forEach((card) => {
      const [key, value] = card;
      console.log(card);
      value.subYearOne.forEach((point, index) => {
          const isOdd = index % 2;
          let imgLink = point.imageLink;
          let title = point.Title;
          let year = point.Year;
          let desc = point.Description;
          let buttonLink = point.buttonLink;
          // console.log(imgLink)
          const appendToHtml = 
          `
          <div class="container ${isOdd ? "right" : "left"}">
          <div class="content">
          <img src="${imgLink}" width="100%;">
          <h2>${title}</h2>
          <p>${year}</p>
          <p>${desc}</p>
          <a href="${buttonLink}"><button>Learn More</button></a>
          </div>    
          </div>
          `;
          
          $(".timeline").append(appendToHtml);
        });
    });
  });


  $(".show-next").click(function () {
  console.log("clicked next")
});


$(".show-previous").click(function () {
  console.log("clicked previous")
});

This is my JSON file:

JavaScript

{
    "1990": {
        "subYearOne": [{
                "Year": 1990,
                "Month": "Feb",
                "Day": "12",
                "Title": "This is a Title",
                "Description": "Grinder doppio black iced id, body est latte shop body.",
                "imageLink": "https://picsum.photos/500/300?random=1",
                "buttonLink": "https://www.youtube.com/"
            },
            {
                "Year": 1991,
                "Month": "Feb",
                "Day": "12",
                "Title": "This is a Title",
                "Description": "Grinder doppio black iced id, body est latte shop body.",
                "imageLink": "https://picsum.photos/500/300?random=2",
                "buttonLink": "https://www.youtube.com/"
            },
            {
                "Year": 1992,
                "Month": "Feb",
                "Day": "12",
                "Title": "This is a Title",
                "Description": "Grinder doppio black iced id, body est latte shop body.",
                "imageLink": "https://picsum.photos/500/300?random=3",
                "buttonLink": "https://www.youtube.com/"
            },
            {
                "Year": 1993,
                "Month": "Feb",
                "Day": "12",
                "Title": "This is a Title",
                "Description": "Grinder doppio black iced id, body est latte shop body.",
                "imageLink": "https://picsum.photos/500/300?random=4",
                "buttonLink": "https://www.youtube.com/"
            },
            {
                "Year": 1994,
                "Month": "Feb",
                "Day": "12",
                "Title": "This is a Title",
                "Description": "Grinder doppio black iced id, body est latte shop body.",
                "imageLink": "https://picsum.photos/500/300?random=5",
                "buttonLink": "https://www.youtube.com/"
            },
            {
                "Year": 1995,
                "Month": "Feb",
                "Day": "12",
                "Title": "This is a Title",
                "Description": "Grinder doppio black iced id, body est latte shop body.",
                "imageLink": "https://picsum.photos/500/300?random=6",
                "buttonLink": "https://www.youtube.com/"
            },
            {
                "Year": 1996,
                "Month": "Feb",
                "Day": "12",
                "Title": "This is a Title",
                "Description": "Grinder doppio black iced id, body est latte shop body.",
                "imageLink": "https://picsum.photos/500/300?random=7",
                "buttonLink": "https://www.youtube.com/"
            },
            {
                "Year": 1997,
                "Month": "Feb",
                "Day": "12",
                "Title": "This is a Title",
                "Description": "Grinder doppio black iced id, body est latte shop body.",
                "imageLink": "https://picsum.photos/500/300?random=8",
                "buttonLink": "https://www.youtube.com/"
            },
            {
                "Year": 1998,
                "Month": "Feb",
                "Day": "12",
                "Title": "This is a Title",
                "Description": "Grinder doppio black iced id, body est latte shop body.",
                "imageLink": "https://picsum.photos/500/300?random=9",
                "buttonLink": "https://www.youtube.com/"
            },
            {
                "Year": 1999,
                "Month": "Feb",
                "Day": "12",
                "Title": "This is a Title",
                "Description": "Grinder doppio black iced id, body est latte shop body.",
                "imageLink": "https://picsum.photos/500/300?random=10",
                "buttonLink": "https://www.youtube.com/"
            }
        ]
    },
    "2000": {
        "subYearTwo": [{
                "Year": 2000,
                "Month": "Feb",
                "Day": "12",
                "Title": "This is a Title",
                "Description": "Grinder doppio black iced id, body est latte shop body.",
                "imageLink": "https://picsum.photos/500/300?random=11",
                "buttonLink": "https://www.youtube.com/"
            },
            {
                "Year": 2001,
                "Month": "Feb",
                "Day": "12",
                "Title": "This is a Title",
                "Description": "Grinder doppio black iced id, body est latte shop body.",
                "imageLink": "https://picsum.photos/500/300?random=12",
                "buttonLink": "https://www.youtube.com/"
            },
            {
                "Year": 2002,
                "Month": "Feb",
                "Day": "12",
                "Title": "This is a Title",
                "Description": "Grinder doppio black iced id, body est latte shop body.",
                "imageLink": "https://picsum.photos/500/300?random=13",
                "buttonLink": "https://www.youtube.com/"
            },
            {
                "Year": 2003,
                "Month": "Feb",
                "Day": "12",
                "Title": "This is a Title",
                "Description": "Grinder doppio black iced id, body est latte shop body.",
                "imageLink": "https://picsum.photos/500/300?random=14",
                "buttonLink": "https://www.youtube.com/"
            },
            {
                "Year": 2004,
                "Month": "Feb",
                "Day": "12",
                "Title": "This is a Title",
                "Description": "Grinder doppio black iced id, body est latte shop body.",
                "imageLink": "https://picsum.photos/500/300?random=15",
                "buttonLink": "https://www.youtube.com/"
            },
            {
                "Year": 2005,
                "Month": "Feb",
                "Day": "12",
                "Title": "This is a Title",
                "Description": "Grinder doppio black iced id, body est latte shop body.",
                "imageLink": "https://picsum.photos/500/300?random=16",
                "buttonLink": "https://www.youtube.com/"
            },
            {
                "Year": 2006,
                "Month": "Feb",
                "Day": "12",
                "Title": "This is a Title",
                "Description": "Grinder doppio black iced id, body est latte shop body.",
                "imageLink": "https://picsum.photos/500/300?random=17",
                "buttonLink": "https://www.youtube.com/"
            },
            {
                "Year": 2007,
                "Month": "Feb",
                "Day": "12",
                "Title": "This is a Title",
                "Description": "Grinder doppio black iced id, body est latte shop body.",
                "imageLink": "https://picsum.photos/500/300?random=18",
                "buttonLink": "https://www.youtube.com/"
            },
            {
                "Year": 2008,
                "Month": "Feb",
                "Day": "12",
                "Title": "This is a Title",
                "Description": "Grinder doppio black iced id, body est latte shop body.",
                "imageLink": "https://picsum.photos/500/300?random=19",
                "buttonLink": "https://www.youtube.com/"
            },
            {
                "Year": 2009,
                "Month": "Feb",
                "Day": "12",
                "Title": "This is a Title",
                "Description": "Grinder doppio black iced id, body est latte shop body.",
                "imageLink": "https://picsum.photos/500/300?random=20",
                "buttonLink": "https://www.youtube.com/"
            }
        ]
    }
}

What I have tried:

I've tried making a function where I add a .slice()

Posted 22-Mar-21 14:56pm

Emmett Martin

Updated 23-Mar-21 1:27am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

W∴ Balboos, *GHB* · Answer 1 · 2021-03-23T01:27:00

If you take the JSON and convert it back to an array (i.e., decode, javascript has a function for that) you have a pretty easy time of it.

It will give you an array of five-element arrays - just use your buttons to increment and decrement the index of the "outer" array and display it's contents in their proper places.

Seems like homework - I've given you a plan but you still need to learn to code so that's not included in this answer. In real life, however, the coding is not the problem nearly so much as figuring out good a plan