0

Quiero que los usuarios busquen el personaje que quieran ubicándolo por el ID, pero el problema está a la hora de seleccionar múltiples ID.

Sólo me renderiza con los parámetros /characters/1/ que es el exclusivo de "Single character".

const button = document.querySelector('.button');
const breakingbadContainer = document.querySelector('.image-container');


button.addEventListener('click', (e) => {
  e.preventDefault;
  getData(input.value)
  console.log(getData)
}) 

function getData () {
  fetch('https://rickandmortyapi.com/api/character/1/')
  .then((response) => response.json())
  .then((data) => {
    createCharacter(data)
  })
}

function createCharacter (character) {
  const img = document.createElement('img')
  img.src = character.image

  const h3 = document.createElement('h3')
  h3.textContent = character.name

  const div = document.createElement('div')
  div.appendChild(img)
  div.appendChild(h3)

  breakingbadContainer.appendChild(div)

}

getData();

Ese es el código javascript que tengo y el problema está en la petición debido a que me marca 400 de una vez.

2
  • 1
    Según la documentación debes enviar en un array /character/[1,2,3] rickandmortyapi.com/documentation
    – Bicho
    Commented el 14 jun. 2021 a las 20:56
  • @alejandro00 es mejor pedir en un comentario aclaraciones sobre el codigo, no añadas cosas que no sabes como vienen
    – Christian
    Commented el 15 jun. 2021 a las 0:59

1 respuesta 1

1

Hay un par de cosas a tener en cuenta:

En primer lugar cuando se hace la peticion se llama a "character/1/" por lo que segun la documentacion https://rickandmortyapi.com/documentation/#character devolvera siempre a Rick (id = 1). En caso de requerir varios personajes se deben pasar las ID separadas con "," de la siguiente manera character/1,2,3/

fetch('https://rickandmortyapi.com/api/character/1,2,3/')

Lo segundo a tener en cuenta es que el request de varios personas devuelve un array de objetos y la funcion createCharacter trabaja con objetos individuales.

Y lo tercero es aca

button.addEventListener('click', (e) => {
  e.preventDefault;
  getData(input.value)
  console.log(getData)
}) 

El console.log va a devolver la funcion pero no su resultado (porque no se la invoca y ademas ejecuta un fetch), en caso de querer ver la data se deberia hacer un console.log(data) dentro del fetch así

function getData () {
  fetch('https://rickandmortyapi.com/api/character/1/')
  .then((response) => response.json())
  .then((data) => {
    console.log(data)
    createCharacter(data)
  })
}

Además en la invocación de getData(input.value) se envia el valor requerido para la peticion pero la funcion aun no lo implementa.

Espero haber podido guiar un poco, saludos!

2
  • se puede usar spreads operators en esa función? Me refiero, para desplegar el arreglo. Commented el 14 jun. 2021 a las 23:58
  • 1
    Si se puede usar spreads operators. Puede modificarse la funcion createCharacter para trabajar con arguments y llamarla como createCharacter(...data); De esa forma trabajaria tanto con llamadas a individuales como multiples. (Tambien puede solamente usarse un for en la llamada y no modificar la funcion) for (let i = 0 ; i < data.length ; i++)(createCharacter(data[i]));
    – ftbalboa
    Commented el 15 jun. 2021 a las 9:29

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.