Explore the Star Wars API using interactive buttons to navigate between different planetary pages

Question

Explore the Star Wars API using interactive buttons to navigate between different planetary pages

I've been working with the incredibly popular StarWars API and have successfully extracted data from the initial page of planets after some research. However, a new challenge has arisen.

My task now is to implement buttons that allow users to navigate through multiple pages of planet data, starting from the second page, and eventually looping back to the first page. Unfortunately, I'm struggling with this part as I am not sure how to dynamically update the URL based on user input.

One solution I considered was binding a variable to the URL that could be modified by the buttons' actions. I attempted to use the ++value and --value patterns to increment and decrement the variable accordingly, but it seems that these changes are not reflected in the URL for the subsequent fetch requests.

I must have made a mistake somewhere along the line, but I can't pinpoint where exactly. Your assistance in resolving this issue would be greatly appreciated.

Below is the code causing the problem:

  value = 1

  const prevButton = document.createElement("button");
  prevButton.innerText = 'Prev Page'
  prevButton.setAttribute("id", "prev-button")
  document.body.append(prevButton);
  prevButton.style.cssText = "background-color: violet; width: 150px; height: 45px; transform: translateY(-725%); margin-left: -10px;"
  prevButton.addEventListener('click', () => {
    return --value
  })
 
  const nextButton = document.createElement("button");
  nextButton.innerText = 'Next Page'
  nextButton.setAttribute("id", "next-button")
  document.body.append(nextButton);
  nextButton.style.cssText = "background-color: violet; width: 150px; height: 45px; transform: translateY(-825%); margin-left: 90.5%;"
  nextButton.addEventListener('click', () => {
   return ++value
  })


const response = await fetch ('https://swapi.dev/api/planets/?page=' + value);
const planetsData = await response.json().then(planetsData => {
let results = planetsData.results;
results.forEach(planet => {
const wrapper = document.createElement("wrapper")
square.append(wrapper);
wrapper.style.cssText = 'background-color: red; width: 200px; height: 250px; margin: auto; margin-top: 1.5%; margin-left: 50px; display: flex; flex-wrap: nowrap; flex-direction: row;'
wrapper.innerHTML = '<div><h1>Name: ' + planet.name + '</h1>' + 
'<h3><p>Climate: ' + planet.climate + '</p></h3>' + 
'<p>Population: ' + planet.population + 
'<p>Terrain: ' + planet.terrain  + '</p></div>';
});
})

javascript arrays json api

Answer 1

Answer №1

Here is an advanced example that expands upon my previous comment. While the buttons are hardcoded for simplicity, the main ideas highlighted are:

Creating a separate function for the fetch process to be called whenever a button is clicked
Utilizing the next and previous properties of the fetched data to determine which page should be shown next.

// Storing references to elements
const planets = document.querySelector('.planets');
const buttons = document.querySelector('.buttons');
const previous = document.querySelector('[data-id="previous"]');
const next = document.querySelector('[data-id="next"]');

// Adding event listener to the button container
buttons.addEventListener('click', handleClick);

// Defining base endpoint and initializing `data`
const base = 'https://swapi.dev/api/planets/?page=1';
let data = {};

// Fetching the first page
fetchData();

// Handling button clicks to fetch the next page based on the clicked button
function handleClick(e) {
  if (e.target.matches('.button')) {
    const { id } = e.target.dataset;
    fetchData(id);
  }
}

// Fetching data based on the provided id, or defaulting to the base endpoint
// Creating HTML from fetched data and updating button states accordingly
async function fetchData(id) {
  const endpoint = data[id] || base;
  const res = await fetch(endpoint);
  data = await res.json();
  const html = createHTML(data.results);
  planets.innerHTML = html;
  previous.disabled = !data.previous ? true : false;
  next.disabled = !data.next ? true : false;
}

// Generating HTML content from the fetched data array using map
function createHTML(data) {
  return data
    .map(planet => {
      return `
        <section class="planet">
          <h4>${planet.name}</h4>
          <p>Population: ${planet.population}</p>
          <p>Terrain: ${planet.terrain}</p>
        </section>
      `;
    })
    .join('');
}

.planet { border: 1px solid #efefef; padding: 0.4em; }
.button:hover { cursor: pointer; }

<section class="buttons">
  <button data-id="previous" class="button">Prev</button>
  <button data-id="next" class="button">Next</button>
</section>
<section class="planets"></section>

Additional Resources

Answer 2

Here is an advanced example that expands upon my previous comment. While the buttons are hardcoded for simplicity, the main ideas highlighted are:

Creating a separate function for the fetch process to be called whenever a button is clicked
Utilizing the next and previous properties of the fetched data to determine which page should be shown next.

// Storing references to elements
const planets = document.querySelector('.planets');
const buttons = document.querySelector('.buttons');
const previous = document.querySelector('[data-id="previous"]');
const next = document.querySelector('[data-id="next"]');

// Adding event listener to the button container
buttons.addEventListener('click', handleClick);

// Defining base endpoint and initializing `data`
const base = 'https://swapi.dev/api/planets/?page=1';
let data = {};

// Fetching the first page
fetchData();

// Handling button clicks to fetch the next page based on the clicked button
function handleClick(e) {
  if (e.target.matches('.button')) {
    const { id } = e.target.dataset;
    fetchData(id);
  }
}

// Fetching data based on the provided id, or defaulting to the base endpoint
// Creating HTML from fetched data and updating button states accordingly
async function fetchData(id) {
  const endpoint = data[id] || base;
  const res = await fetch(endpoint);
  data = await res.json();
  const html = createHTML(data.results);
  planets.innerHTML = html;
  previous.disabled = !data.previous ? true : false;
  next.disabled = !data.next ? true : false;
}

// Generating HTML content from the fetched data array using map
function createHTML(data) {
  return data
    .map(planet => {
      return `
        <section class="planet">
          <h4>${planet.name}</h4>
          <p>Population: ${planet.population}</p>
          <p>Terrain: ${planet.terrain}</p>
        </section>
      `;
    })
    .join('');
}

.planet { border: 1px solid #efefef; padding: 0.4em; }
.button:hover { cursor: pointer; }

<section class="buttons">
  <button data-id="previous" class="button">Prev</button>
  <button data-id="next" class="button">Next</button>
</section>
<section class="planets"></section>

Additional Resources

Explore the Star Wars API using interactive buttons to navigate between different planetary pages

Answer №1

Similar questions

Add a JavaScript library to the header directly from the body of a webpage, ensuring it is exclusive to a single

Implementing a PHP button update functionality sans utilizing an HTML form

Choose an input field using jQuery that is specified by its name

java code unicode feature in csharp

WSO2 PayloadFactory is delivering JSON data neatly packaged in a JSONObject

Design a custom favicon for a website link associated with JavaScript

Chrome mistakenly identifying octet-stream as a .png image

I am interested in tallying up the number of adjacent matching elements within an array and then providing the final count

Shifting a div from side to side

What is the best way to send only one variable from a complex JavaScript file?

Detecting onClick event upon form submission

The done() method in AJAX is triggered upon completion of all request processing tasks

Discovering the content of an internal Database or Table in TYPO3 and showcasing it using JavaScript, JQuery, or AJAX

Keep running AJAX operations using setTimeout even when the browser window has been closed

Guide on linking JavaScript files in Node.js

JavaScript does not allow the use of variables outside of functions

Regular expressions for identifying operands and operators in a calculator application implemented with JavaScript

Encountering issues with the JsonObjectRequest implementation within my project

A method of iteration that allows us to traverse through an object, regardless of whether it contains a single item or an array of items, is known as dynamic looping

Converting from C# to JavaScript results in JSON decoding failing to capture a specific property