2

Estoy haciendo un sitio cuyo index carga notas almacenadas en JSON. El problema es que al no encontrar más notas, empieza a devolver ERROR 404. Quería saber si es posible indicarle al FETCH que si no encuentra el archivo, frene la iteración. Copio el código aquí debajo:

for( n=1 ; n <= 20 ; n++) {
fetch(`noticias/nota-${n}.json`)
    .then(res => res.json())
    .then(res => {
            const caja = document.createElement("div");
            caja.setAttribute("class",`noti noti-${res.notaNumero}`);
            caja.setAttribute("id",res.notaNumero);
            noticias.appendChild(caja); 
                caja.innerHTML = 
                `<a href="noticia.html">
                    <div class="noti-img">
                        <img src="noticias/nota-${res.notaNumero}-cover.jpg" class="">
                        <h4 class="seccion-2">${res.seccion}</h4>
                    </div>
                    <div class="noti-texto">
                        <h2 class="titulo-2">${res.titulo}</h2>
                        <h3 class="subtitulo-2">${res.subtitulo}</h3>
                    </div>
                </a>`;
        }).catch((e)=>{
            break;
        })
}
2
  • Para que el catch tome el error debes poner un throw. Esto es pon un consicional que si no es res.ok lance un throw Commented el 15 mar. 2022 a las 17:31
  • igual la idea es que si las notas estan todas dentro de un unico json hagas la peticion una sola vez y hagas luego un ciclo for in (para iterar sobre objetos) para leer los resultados de las notas Commented el 15 mar. 2022 a las 20:08

1 respuesta 1

0

Si lo que quieres es leer nota-1.json y si si existe, pintarla, y luego llamar a nota-2.json y si si existe, pintarla, luego llamar a nota-3.json y si no existe, detener y no preguntar por nota-4.json ni nota-5.json, etc., lo que debes hacer primero es esperar a que el fetch termine para revisar su resultado. fetch es asíncrono, por lo tanto tus 20 solicitudes en este momento se realizan al tiempo.

Para ejecutarlas de forma secuencial y salir del ciclo debes hacer algo como:

for (n = 1; n <= 20; n++) {
    let result = await fetch(`noticias/nota-${n}.json`);

    if (!res.ok) {
        break;
    }

    res = await res.json();
  
    const caja = document.createElement("div");
    caja.setAttribute("class", `noti noti-${res.notaNumero}`);
    caja.setAttribute("id", res.notaNumero);
    noticias.appendChild(caja);
    caja.innerHTML =
        `<a href="noticia.html">
            <div class="noti-img">
                <img src="noticias/nota-${res.notaNumero}-cover.jpg" class="">
                <h4 class="seccion-2">${res.seccion}</h4>
            </div>
            <div class="noti-texto">
                <h2 class="titulo-2">${res.titulo}</h2>
                <h3 class="subtitulo-2">${res.subtitulo}</h3>
            </div>
        </a>`;
}

Nota: Este código debes ejecutarlo dentro de una función asíncrona

1
  • Excelente! Voy a probar eso mismo! Gracias!! Commented el 17 mar. 2022 a las 22:02

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.