Click here to Skip to main content
15,845,469 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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
Updated 23-Mar-21 2:27am

1 solution

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
 
Share this answer
 
Comments
Emmett Martin 23-Mar-21 12:02pm    
Definitely not homework heh. Its a personal work project.
Thank you for the tips though. I'll try it out.

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900