0

Hola estoy realizando una api, donde al pulsar el botón para cambiar de página mostrar su correspondiente contenido, si por ejemplo está en la page=1, si pulso para ir a la siguiente que muestre page=2, pero no lo hace como es debido. Gracias de antemano.

var div1 = document.createElement("div");
div1.setAttribute("id", "div1");

var div2 = document.createElement("div");
div2.setAttribute("id", "resultado");


// Declaro la variable contador

let contador = 1;
let sumar1 = page=1;
let data = [];
const valor = document.querySelector('#span');
const botones_aumentar = document.querySelectorAll('.boton');

botones_aumentar.forEach(boton => {
    boton.addEventListener('click', function (e) {
        const estilos = e.currentTarget.classList;
        const xhttp = new XMLHttpRequest();
        let url1 = 'https://reqres.in/api/users';
        
        
        if (estilos.contains('aumentar')) {
            xhttp.open('GET', url1, true);
            xhttp.send();

            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    let datos = JSON.parse(this.responseText);

                    // aquí solo agregué ['data']
                    console.log(datos['data']);

                    let resultado = document.querySelector('#resultado');
                    resultado.innerHTML = '';

                    //len variable donde guardo tamaño del array datos['data'] 
                    len = datos['data'].length;
                    //cambié a un for tradicional
                    for (let i = 0; i < len; i++) {
                        //igualo la variable item a la correspondiente iteración 
                        let item = datos['data'][i];
                        [item.first_name, item.last_name];

                        var div = document.createElement('div');
                        div.setAttribute('id', 'container')
                        var p0 = document.createElement('p');


                        var p1 = document.createElement('p');

                        p1.setAttribute("id", "fotos");


                        var hr = document.createElement('hr');
                        p0.innerHTML = item.first_name + " " + item.last_name;

                        var img = document.createElement("img");
                        img.setAttribute("src", item.avatar);
                        document.getElementById("fotos");
                        p1.appendChild(img);


                        div.appendChild(hr);
                        div.appendChild(p0)
                        div.appendChild(p1);

                        resultado.appendChild(div);
                    }

                }
            }
            sumar1++;
            contador++;
        }
        

        valor.textContent = contador;
    })
})

document.body.appendChild(div1).appendChild(btn1);
document.body.appendChild(div1).appendChild(span);
document.body.appendChild(div1).appendChild(btn2);
document.body.appendChild(div2);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Ejercicio 3</title>
</head>
<body>
    <button id="btn1" class="boton disminuir"><</button>
    <span id="span">1</span>
    <button id="btn2" class="boton aumentar">></button>
    <script src="api.js"></script>
</body>
</html>

5
  • 1
    Hola, no se entiende mucho lo que quieres hacer, no estas utilizando ninguna de la variables en ningún lado ni haciendo un log de las mismas, como sabes que no cambian? Efectivamente sumar1 cambia, si te refieres a que la variable page no cambia pues esto no va a pasar, pues asignar una variable igual a otra no las enlaza de ninguna manera, si cualquiera cambia, la otra no se verá afectada, tampoco significa que las clona. Commented el 19 may. 2021 a las 16:29
  • Si lo que quieres es crear una variable que se modifique si modificas la reasignación siempre puedes crear un proxy home.rory.no/ftqrEZfG2OYyih3uQkwRwKOGMMY para hacer mirror de un objeto. Commented el 19 may. 2021 a las 16:41
  • lo mismo me he expresado mal en la pregunta, lo que quiero es que al pulsar el botón haga de paginación y cambie el contenido en la petición ajax pero no lo hace correctamente Commented el 19 may. 2021 a las 16:48
  • Por que no usas fetch en lugar de ajax? Igualmente me parece que no estas haciendo nada para esto, podría poner algún ejemplo, pero específicamente que has intentado para cambiar la paginación ya que en tu código, solo estas sumando los números pero nada mas. Commented el 19 may. 2021 a las 16:52
  • he cambiado la pregunta y la duda, pero si un ejemplo me vendría bastante bien para entenderlo gracias ! Commented el 19 may. 2021 a las 16:54

1 respuesta 1

1

Según la API tienes que hacer queries de las pagina para obtener la paginación, por ejemplo: ?page=1, por lo tanto lo que debes hacer es simplemente cambiar la url cuando hagas una request, fíjate en el siguiente ejemplo (mínimo) hecho con fetch pero que representa lo que debes hacer:

const mas = document.querySelector('#mas')
const menos = document.querySelector('#menos')
const content = document.querySelector('#content')

let page = 1;

const handler = async p => {
  console.log(p)
  content.innerHTML = ""
  const res = await fetch(
    `https://reqres.in/api/users?page=${p}`,
    );
  const { data } = await res.json()
  data.forEach(el => {
    const img = document.createElement('img')
    img.src = el.avatar
    content.appendChild(img)
  })
}

handler(page)

mas.addEventListener('click', () => {
    page++
    handler(page)
})

menos.addEventListener('click', () => {
    page = page > 1 ? page - 1 : page
    handler(page)
})
<div id="buttons">
  <h1>Paginación</h1>
  <button id="menos">-</button>
  <button id="mas">+</button>
</div>
<div id="content" >
</div>

Lo que se hace en el ejemplo es simplemente tener una variable donde almacenamos el numero y en el la función handler hacemos la request a la api con el numero de la pagina en la URL, esta cambia según avances o disminuya la paginación.

También cabe destacar que en tu código haces algo que puede llegar a confundirte, cuando haces esto let sumar1= page=1 lo que haces es crear dos variables al mismo tiempo y una es equivalente a la otra, me parece que lo querias hacer como un string, esto es como lo deberias hacer, nota las comillas: let sumar1= 'page=1', esto se presta a confusión porque a primeras no hay ningún error ya que la sintaxis está bien pero por lo tanto js no te avisa.

Y también la intención de sumar una string está mal, solo puedes sumar números si no obtendrás una concatenación o un error ya que let sumar1= 'page=1'; sumar1++ no es un numero y no obtendrás el resultado deseado.

Espero que te sea de ayuda un saludo.

1
  • gracias por ejemplo @Dєηyη Crawford, me servirá de guía para mejorar la api, un saludo ! Commented el 19 may. 2021 a las 17:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.