What is the best way to retrieve information from a JSON file and navigate through content with previous and next buttons using jQuery?

Question

What is the best way to retrieve information from a JSON file and navigate through content with previous and next buttons using jQuery?

A functionality is being developed using jQuery to showcase content from a JSON file whenever the user interacts with the navigation links (prev and next arrows). Upon landing on the page, the initial JSON object is displayed automatically. Subsequent clicks on the "Next" arrow reveal the subsequent objects from the JSON file. Once clicked four times, the display resets back to the first JSON object. Regardless of the JSON file's size, only four objects are visible to the user.

At present, the JavaScript code on the page, which was inherited, contains hardcoded divs for each of the four views. The objective is to configure the system in a way that all data is sourced externally from a JSON file. The current script utilizes jQuery successfully to retrieve the JSON file. For consistency across the updated version of the page, continuing to use jQuery is preferred.

Within the existing jQuery setup, there is a loadData() function that was utilized for testing the connection to the JSON file. Following successful testing, the loadData button has been removed. Once the method to cycle through the initial four JSON objects is determined, the HTML and CSS components can be finalized.

We appreciate any insights or suggestions provided regarding this matter.

  
  <!— Code Snippet —>

javascript html jquery css json

Answer 1

Answer №1

From your query, it appears that you are currently facing a challenge with

I just need to figure out how to loop through the initial four objects in the JSON file so I can finalize the HTML and CSS.

Given the complexity of your example, here is a simplified version demonstrating how you can cycle through cards:

The variable issuesToLoopOn at the beginning allows you to specify the number of issues you want to iterate over, regardless of the length of the issues array.

View Example: https://jsfiddle.net/shaunakv1/4k2ufmvn/125/

HTML

<button id="previous">previous</button>
<button id="next"gt;next</button>

<div id="card">
  <div id="issue_number"></div>
  <div id="issue_label"></div>
  <div id="issue_link"></div>
  <div id="issue_link_cta"></div>
  <div id="display_description"></div>
  <div id="featured_image"></div>
  <div id="publish_date"></div>
  <div id="time_to_read"></div>  
</div>

JS

let issues;
const issuesToLoopOn = 3;

$(document).ready(async function () {
    const res = await fetch('https://raw.githubusercontent.com/loganatsea/features/main/issues');

    const json = await res.json();
    issues = Object.values(json.issues);

    //display first issue by default
    displayJson(issues[0]);
    //write current displayed index to dom ( optionally you can save in a state variable)
    $("#card").data('idx', 0)
    $("#card").data('total', issues.length);
});

$("#next").on('click', () => updateNextCard(1))
$("#previous").on('click', () => updateNextCard(-1))


function updateNextCard(by) {
    let currentIdx = parseInt($("#card").data('idx'));
    let nextIdx = currentIdx + by;

    if (nextIdx === issuesToLoopOn) nextIdx = 0;
    else if (nextIdx < 0) nextIdx = issuesToLoopOn - 1;

    console.log(nextIdx); //update dom and state

    displayJson(issues[nextIdx]);
    $("#card").data('idx', nextIdx);
}

function displayJson(obj) {
    Object.keys(obj).forEach(key => {
        $(`#${key}`).html(`<p><b> ${key} </b>: ${obj[key]} </p>`);
    });
}

Update I have updated the answer to show how to use values from JSON and display them on the DOM. There's no need to "parse" JSON in JavaScript. You can simply treat it as an Object or Array. JSON stands for JavaScript Object Notation. In your situation, you can place the div elements wherever in the HTML as long as they have the correct ID referenced by jQuery selector for it to work.

Here's the revised fiddle:

https://jsfiddle.net/shaunakv1/4k2ufmvn/157/

Answer 2

From your query, it appears that you are currently facing a challenge with

I just need to figure out how to loop through the initial four objects in the JSON file so I can finalize the HTML and CSS.

Given the complexity of your example, here is a simplified version demonstrating how you can cycle through cards:

The variable issuesToLoopOn at the beginning allows you to specify the number of issues you want to iterate over, regardless of the length of the issues array.

View Example: https://jsfiddle.net/shaunakv1/4k2ufmvn/125/

HTML

<button id="previous">previous</button>
<button id="next"gt;next</button>

<div id="card">
  <div id="issue_number"></div>
  <div id="issue_label"></div>
  <div id="issue_link"></div>
  <div id="issue_link_cta"></div>
  <div id="display_description"></div>
  <div id="featured_image"></div>
  <div id="publish_date"></div>
  <div id="time_to_read"></div>  
</div>

JS

let issues;
const issuesToLoopOn = 3;

$(document).ready(async function () {
    const res = await fetch('https://raw.githubusercontent.com/loganatsea/features/main/issues');

    const json = await res.json();
    issues = Object.values(json.issues);

    //display first issue by default
    displayJson(issues[0]);
    //write current displayed index to dom ( optionally you can save in a state variable)
    $("#card").data('idx', 0)
    $("#card").data('total', issues.length);
});

$("#next").on('click', () => updateNextCard(1))
$("#previous").on('click', () => updateNextCard(-1))


function updateNextCard(by) {
    let currentIdx = parseInt($("#card").data('idx'));
    let nextIdx = currentIdx + by;

    if (nextIdx === issuesToLoopOn) nextIdx = 0;
    else if (nextIdx < 0) nextIdx = issuesToLoopOn - 1;

    console.log(nextIdx); //update dom and state

    displayJson(issues[nextIdx]);
    $("#card").data('idx', nextIdx);
}

function displayJson(obj) {
    Object.keys(obj).forEach(key => {
        $(`#${key}`).html(`<p><b> ${key} </b>: ${obj[key]} </p>`);
    });
}

Update I have updated the answer to show how to use values from JSON and display them on the DOM. There's no need to "parse" JSON in JavaScript. You can simply treat it as an Object or Array. JSON stands for JavaScript Object Notation. In your situation, you can place the div elements wherever in the HTML as long as they have the correct ID referenced by jQuery selector for it to work.

Here's the revised fiddle:

https://jsfiddle.net/shaunakv1/4k2ufmvn/157/

What is the best way to retrieve information from a JSON file and navigate through content with previous and next buttons using jQuery?

Answer №1

Similar questions

Empty array is logged by the server after sending a JavaScript variable through post request

How to make background color transparent in CSS for Safari browser

What is the reason behind Firefox failing to display a linear gradient when the background-size values are more than 255px?

Tips for creating an easyui layout using multiple nested layouts

.bootstrapMaterialDatePicker does not work within Codeigniter version 3

How can I use jQuery to switch classes or activate a click event on the most recently clicked element?

Incorporating middleware to handle 404 errors in Express

Permanently remove the span tag and any associated text from the HTML document

Adjust the field's color depending on the outcome displayed within

Unable to choose multiple options within a selection field

Unable to cancel the setTimeout function by using clearTimeout as the value appears to be null for unknown reasons

The placeholder text feature for Google custom search is ineffective when using the Edge browser

Visualizing CSV data with charts and tables

Executing a PHP file in JavaScript without using the jQuery library can be achieved by making

React Native - useEffect causing a double render on Home screen

The error message "TypeError: window.Razorpay is not a constructor" indicates that

Jest test encounters an error due to an unexpected token, looking for a semicolon

Is there a way to retrieve object data without using the map JS function?

Trouble in testing: ComponentDidMount is mysteriously bypassed by Jest/Enzyme when it's supposed to be triggered

Omitting "a" elements with a designated ancestor from a jQuery scroll operation