Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript iterating through pages with Javascript

Hello! I am just starting with JavaScript and cannot come up with the idea of how to add an Event Listener to a button that would shuffle through pages of this document with APIs in the attached. I need to get the link inside "data.info.next" every time I press the button. If I use fetch('data.info.next'), but it iterates only one time and returns next page, but never goes further to other 42 pages. So I only get characters from second page.

thank you

<
'use strict';

let data;

const btn_next = document.querySelector('.next')
const btn_back = document.querySelector('.back')
const div_cards = document.querySelector('.cards')
const div_buttons = document.querySelector('.buttons')

async function prepare() {
let response = await fetch('https://rickandmortyapi.com/api/character');
if (response.ok) {
data = await response.json();
data.results.forEach(elem => { div_cards.append(create_card(elem)) })
} else {alert(`error`)}
}
prepare()

const search_input = document.createElement('input')

div_buttons.append(search_input)
search_input.style.width = '300px'
search_input.style.height = '40px'
search_input.placeholder = 'find character'

search_input.addEventListener('input', sort_cards)
function sort_cards(event) {
let array = data.results.filter(elem => elem.name.toLowerCase().includes(event.target.value.trim()))
div_cards.innerHTML = "";
array.forEach(elem => div_cards.append(create_card(elem)))
return div_cards
}

function create_card(object) {
const div_card = document.createElement('div')
const cardImage = document.createElement('img')
const name1 = document.createElement('h2')
const species = document.createElement('span')
cardImage.src = object.image
name1.textContent = object.name
species.textContent = object.species
div_card.append(cardImage)
div_card.append(name1)
div_card.append(species)

return div_card
}

// btn_next.addEventListener('click', moveOn)
// function moveOn() {
// div_cards.innerHTML = "";
???????????????? `what next`
// }
/>
 

Attachments

  • Screenshot 2023-03-21 at 10.53.46 AM.jpg
    Screenshot 2023-03-21 at 10.53.46 AM.jpg
    357.2 KB · Views: 3
  • Screenshot 2023-03-21 at 11.07.44 AM.jpg
    Screenshot 2023-03-21 at 11.07.44 AM.jpg
    645.3 KB · Views: 3
Last edited:
Solution
Okay, I resolved it myself now everything is working.

<
btn_next.addEventListener('click', moveOn)
function moveOn() {
div_cards.innerHTML = "";
async function prepare() {
let response = await fetch(data.info.next);
data = await response.json();
data.results.forEach(elem => { div_cards.append(create_card(elem)) })
}
prepare()
sort_cards()
}


btn_back.addEventListener('click', moveBack)
function moveBack() {
div_cards.innerHTML = "";
async function prepare() {
let response = await fetch(data.info.prev);
data = await response.json();
data.results.forEach(elem => { div_cards.append(create_card(elem)) })
}
prepare()
sort_cards()
}
/>
Okay, I resolved it myself now everything is working.

<
btn_next.addEventListener('click', moveOn)
function moveOn() {
div_cards.innerHTML = "";
async function prepare() {
let response = await fetch(data.info.next);
data = await response.json();
data.results.forEach(elem => { div_cards.append(create_card(elem)) })
}
prepare()
sort_cards()
}


btn_back.addEventListener('click', moveBack)
function moveBack() {
div_cards.innerHTML = "";
async function prepare() {
let response = await fetch(data.info.prev);
data = await response.json();
data.results.forEach(elem => { div_cards.append(create_card(elem)) })
}
prepare()
sort_cards()
}
/>
 
Solution

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom