2

Estoy probando con la API https://swapi.co/.

Lo hice con el método fetch y todo correcto, pero tengo una duda respecto a cargar más objetos, ya que los reparte en diferentes páginas como podéis ver aquí: https://swapi.co/api/people/?format=json

Tiene next y previous, lo cual te va cargando a la siguiente página, y te mostrará los nuevos datos. ¿Podríais indicarme de que forma podría hacerlo y que me vaya mostrando las siguientes páginas?

Dejo el código aquí:

'use strict'

var personajes = document.querySelector(".personajes");

    getPersonajes()
                .then(results => results.json())
                .then(people => {

                    listadoPersonajes(people.results);

                })
                .catch(error => {// CAPTURAR ERRORES Y EXCEPCIONES QUE OCURRAN EN EL CODIGO
                    console.log(error+ " Error en la peticion 1");
                })

    function getPersonajes() {
        return fetch('https://swapi.co/api/people/?format=json')
    }

let pintarPersonajes = ``

function listadoPersonajes(usuarios){

    usuarios.map((user, i) => {// Recorremos los usuarios con los parametros users y su index(i)

        pintarPersonajes = `
            <div class="col">
                <div class="card" style="width: 18rem;">
                        <div class="card-body">
                        <h5 class="card-title name">${user.name}</h5>
                        <p class="card-text height">${user.height}</p>
                        <a href="#" class="card-link">Card link</a>
                        </div>
                </div>
            </div>

        `
        personajes.innerHTML += pintarPersonajes;

        document.querySelector(".loader").style.display = "none";
    });

}

1 respuesta 1

3

puedes hacerlo asi:

    'use strict'

    var personajes = document.querySelector(".personajes");


    getPersonajes();
	
	// configuramos un valor por defecto para url en caso de que no se envie
    function getPersonajes(url){  // forma 1 getPersonajes(url='https://swapi.co/api/people/?format=json'){ 
    	// forma 2 "me gusta mas"
    	url = url || 'https://swapi.co/api/people/?format=json';

        fetch(url)
            .then(results => results.json())
            .then(people => {
                listadoPersonajes(people.results);
            	// operador !! convierte a booleano y && ejecuta lo que sigue
            	// si lo anterior es true example: if(people.next){getPersonajes(people.next)}
            	!!people.next &&  getPersonajes(people.next);
            })
            .catch(err => { // CAPTURAR ERRORES Y EXCEPCIONES QUE OCURRAN EN EL CODIGO
                console.log(err + " Error en la peticion 1");
            })

    }

    let pintarPersonajes = ``

    function listadoPersonajes(usuarios) {

        usuarios.map((user, i) => { // Recorremos los usuarios con los parametros users y su index(i)

            pintarPersonajes = `
            <div class="col">
                <div class="card" style="width: 18rem;">
                        <div class="card-body">
                        <h5 class="card-title name">${user.name}</h5>
                        <p class="card-text height">${user.height}</p>
                        <a href="#" class="card-link">Card link</a>
                        </div>
                </div>
            </div>

        `
            personajes.innerHTML += pintarPersonajes;

            //document.querySelector(".loader").style.display = "none";
        });

    }
<div class="personajes"></div>

darle next con un click:

  'use strict'

        var personajes = document.querySelector(".personajes");
        var nextUrl = null;
getPersonajes();
     
    	
    	// configuramos un valor por defecto para url en caso de que no se envie
        function getPersonajes(url){  // forma 1 getPersonajes(url='https://swapi.co/api/people/?format=json'){ 
        	// forma 2 "me gusta mas"
        	url = url || 'https://swapi.co/api/people/?format=json';

            fetch(url)
                .then(results => results.json())
                .then(people => {
                    listadoPersonajes(people.results);
                	// operador !! convierte a booleano y && ejecuta lo que sigue
                	// si lo anterior es true example: if(people.next){getPersonajes(people.next)}
                	nextUrl = !!people.next ? people.next: null;
                })
                .catch(err => { // CAPTURAR ERRORES Y EXCEPCIONES QUE OCURRAN EN EL CODIGO
                    console.log(err + " Error en la peticion 1");
                })

        }

        let pintarPersonajes = ``

        function listadoPersonajes(usuarios) {

            usuarios.map((user, i) => { // Recorremos los usuarios con los parametros users y su index(i)

                pintarPersonajes = `
                <div class="col">
                    <div class="card" style="width: 18rem;">
                            <div class="card-body">
                            <h5 class="card-title name">${user.name}</h5>
                            <p class="card-text height">${user.height}</p>
                            <a href="#" class="card-link">Card link</a>
                            </div>
                    </div>
                </div>

            `
                personajes.innerHTML += pintarPersonajes;

                //document.querySelector(".loader").style.display = "none";
            });

        }
        
document.querySelector(".btn").addEventListener("click",(e) =>{
  if(nextUrl)
      getPersonajes(nextUrl);
});
<button class="btn">next</button>
<div class="personajes"></div>

4
  • Muchas gracias Bryno, funciona perfectamente. Una duda sobre eso, ¿Cómo lo podría hacer para cargar los datos cuando pulsara un botón "Next" y "Previous" ?
    – JFelix
    el 6 jun. 2019 a las 9:09
  • crea una variable en el scope global llamada var nextUrl = null y cambias !!people.next && getPersonajes(people.next); por un nextUrl = !!people.next ? people.next : null; y ahora solo debes llamar a getPersonajes(nextUrl) cuando se de el evento click.
    – Bryro
    el 6 jun. 2019 a las 14:02
  • estoy intentando como me dijiste pero no me sale por alguna razón. ¿Podrías modificar la respuesta tuya para ver como se haría?
    – JFelix
    el 6 jun. 2019 a las 15:00
  • Mil gracias por tu ayuda @Bryro ! Funcionando :)
    – JFelix
    el 6 jun. 2019 a las 16:57

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.