Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
2
respuestas

Consulta punto 8: Manos a la obra: retornando los top episodios de una serie

Buenas! les hago una consulta técnica, la verdad que me quemé casi 48 hs tratando de encontrar el error en mi código para hacer el top5Episodios pero pude hacerlo en mi back y envia el json correctamente!. Mi Front toma y procesa el archivo también correctamente. El único problema que tengo es escuchar cuando se cambia el select de elegir los episodios por temporada, todos y los top 5 episodios. Ya que la primera vez que consulta funciona bien pero luego no actualiza si cambio de opción.

listaTemporadas.addEventListener("change", () => {
  cargarTemporadas;
  cargarTop5Episodios;
});

Les paso info complementaria: json okIngrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Ejemplo json:

[
    {
        "temporada": 4,
        "titulo": "All His Angels",
        "numeroEpisodio": 15
    },
    {
        "temporada": 2,
        "titulo": "The Lord's Prayer",
        "numeroEpisodio": 10
    },
    {
        "temporada": 3,
        "titulo": "To the Gates!",
        "numeroEpisodio": 8
    },
    {
        "temporada": 4,
        "titulo": "The Last Ship",
        "numeroEpisodio": 10
    },
    {
        "temporada": 3,
        "titulo": "The Dead",
        "numeroEpisodio": 10
    }
]

Y la función js del front que procesa el archivo:

// Función para cargar los top 5 episodios
function cargarTop5Episodios() {
  getDatos(`/series/${serieId}/top5Episodios`)
    .then((episodios) => {
      fichaSerie.innerHTML = "";

      episodios.forEach((episodio) => {
        const li = document.createElement("li");
        li.textContent = `Temporada ${episodio.temporada} - ${episodio.titulo} - Episodio ${episodio.numeroEpisodio}`;
        fichaSerie.appendChild(li);
      });
    })
    .catch((error) => {
      console.error("Error al obtener episodios:", error);
    });
}

Agradezco, sino puedo resolverlo sigo avanzando porq me consumió 2 días este desafio, creo que fácil pero por cositas de no prestar atención en una palabra me super retraso...

2 respuestas
solución!

Perdón pero nuevamente está solucionado, gracias chatGPT jajaj les paso el código correcto por si es de su interés, ahora refresco perfecto la web al cambiar la opción:

// Adiciona escuchador de evento para el elemento select
listaTemporadas.addEventListener("change", cargarEpisodios);

// Carga las informaciones de la série y las temporadas cuando la página carga

cargarInfoSerie();
cargarTemporadas();

y a la funcionfunction cargarEpisodios() la valide antes para que selecione cargarTop5Episodios() si corresponde sino siga su curso normal...

// Funcion para cargar episodios de una temporada
function cargarEpisodios() {
  if (listaTemporadas.value === "top5episodios") {
    cargarTop5Episodios();
    return; // Detener la ejecución de la función después de cargar los top 5 episodios
  }

Hola Claudio, ¡espero que estés bien!

Gracias por compartir la solución encontrada con nosotros, sin duda ayudará a otros colegas que puedan tener el mismo problema.

¡Saludos y buenos estudios!