1

Este es el error

:8000/obtener-datos/:1 Failed to load resource: the server responded with a status of 404 (Not Found) (index):255 Error al obtener los datos: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

Este es la parte del HTML que manda error

<script>
  const curso_id = '{{ curso_id }}';
  // Obtener los datos requeridos desde el servidor
  fetch(`/obtener-datos/${curso_id}`)
    .then(response => response.json())
    .then(data => {
      // Generar el HTML dinámicamente para mostrar los datos
      const container = document.createElement("div");
      container.style.color = "grey";

      data.preguntas.forEach(pregunta => {
        const respuestas = data.respuestas_contexto[pregunta.id.toString()];

        const listItem = document.createElement("li");
        listItem.innerHTML = `
          Pregunta: ${pregunta.cuerpo}<br>
          Respuesta del usuario: ${respuestas.respuesta_usuario || ''}<br>
          Alternativa correcta: ${respuestas.alternativa_correcta || ''}<br>
          Evaluación: ${respuestas.evaluacion || ''}
        `;

        container.appendChild(listItem);
      });

      // Agregar el contenedor al elemento existente en el HTML
      const claseContainer = document.getElementById("clase-container");
      claseContainer.appendChild(container);
    })
    .catch(error => {
      console.error('Error al obtener los datos:', error);
    });
</script>

y esta es la vista de ese template

def evaluaciones_a_pregunta(pregunta, respuestas_usuario, alternativas_correctas, evaluaciones):
    pregunta_id = str(pregunta.id)
    respuesta_usuario = respuestas_usuario.get(pregunta_id, '')
    alternativa_correcta = alternativas_correctas.get(pregunta_id, '')
    evaluacion = evaluaciones.get(pregunta_id, False)

    print("Pregunta:", pregunta.cuerpo)
    print("Respuesta del usuario:", respuesta_usuario)
    print("Alternativa correcta:", alternativa_correcta)
    evaluacion_texto = "Correcta" if evaluacion else "Incorrecta"
    print("Evaluación:", evaluacion_texto)
    print()

    # Puedes devolver los valores si los necesitas en otro lugar del código
    return respuesta_usuario, alternativa_correcta, evaluacion

def obtener_datos(request, curso_id):
    curso = Cursos.objects.get(id=curso_id)
    preguntas = Pregunta.objects.filter(curso_id=curso_id)
    respuestas_contexto = {}

    for pregunta in preguntas:
        pregunta_id = str(pregunta.id)
        respuestas_contexto[pregunta_id] = {
            'respuesta_usuario': '',  # Aquí debes obtener la respuesta del usuario para cada pregunta
            'alternativa_correcta': pregunta.alternativa_correcta,
            'evaluacion': ''  # Aquí debes calcular la evaluación para cada pregunta
        }

    data = {
        'preguntas': preguntas,
        'respuestas_contexto': respuestas_contexto,
        'curso_id': curso_id
    }

    return JsonResponse(data)

Solucione el otro error, ahora me aparece este otro en consola, la página ya no me tira error

Si alguien me puede ayudar con esto.

3
  • 1
    Significa que en .then(response => response.json()) está recibiendo un HTML o un XML (por eso comienza por el DOCTYPE) y eso definitivamente no es un JSON. Como estás usando JsonResponse, lo que se presume es que esa petición está obteniendo un mensaje de error. Podrías hacerle debug al contenido de response, imprimirlo en los logs o algo, no?
    – Alfabravo
    Commented el 1 jun. 2023 a las 17:10
  • @Alfabravo Seguramente el servidor le retorna una página de error 404 al no encontrar el recurso, y el fetch trata de parsear esa página
    – Yussef
    Commented el 1 jun. 2023 a las 17:24
  • El error 404 es que no encuentra nada en la ruta que has puesto /obtener-datos/${curso_id} verifica que sea correcta
    – Yussef
    Commented el 1 jun. 2023 a las 17:25

1 respuesta 1

0

Cuando llamas a un API o recurso externo, no puedes asumir que las cosas siempre irán bien y procesar el JSON que te devuelve.

Justo ahora tienes un error 404, que indica que el recurso que estás pidiendo no existe en el servidor. En este caso, el servidor te devuelve un HTML predefinido que mostraría el mensaje de error de manera elegante en un browser.

Este error probablemente se deba a un error en la forma en la que construyes la llamada o a un error de configuración en el servidor. Eso es algo que deberás determinar y resolver, pero la parte importante aquí es que, en el futuro, el pueden haber errores de comunicaciones o el servidor puede devolverte otros errores, por miles de razones, incluyendo el rango de los 400 (errores del cliente) o de los 500 (errores del servidor).

Lo típico es que para estos errores el servidor devuelva un body con HTML o, deplano, vacío.

Lo importante es que en todos estos casos, no va a venir un JSON en la respuesta y, si invocas a la promesa .json() del response, tu página va a fallar.

Por lo mismo, para tener una página más robusta, debes cambiar la manera general en la que procesas la respuesta del servidor. La interfaz Response tiene una propiedad llamada ok que te indica si se recibió un status en el rango de los 200, que normalmente indica éxito en la llamada, y muchas otras que pueden resultarte útiles en esta tarea.

Puedes realizar las validaciones que consideres. La de la propiedad ok es la más básica, entonces, puedes cambiar la estructura de tu llamada a algo como:

console.log("Invocando API...");
fetch("/ruta/a/mi/api").then((response) => {
  if (response.ok) {
    return response.json();
  }
  throw new Error("Error " + response.status + " al llamar al API: " + response.statusText);
})
.then((responseJson) => {
  //procesar los datos JSON
})
.catch((error) => {
  console.error(error)
});
console.log("Esperando respuesta...");

Como ves, invoco a response.json() solo si la respuesta está OK, si no, elevo una excepción, que será procesada en el .catch().

Allí puedes decidir como procesar el error, por ejemplo, mostrar un mensaje de error al usuario, o pedirle que reintente, etc.

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.