0

En el crud de administración, a la hora de borrar una guía me sale en consola el error SyntaxError: Unexpected end of JSON input, la función borra correctamente la guía deseada pero no logro saber de donde procede ese error y como puedo solucionarlo. Muestro el código donde se ejecuta la función de borrar y la llamada a la api donde me da el error justo en esta linea const data = await response.json().

interface Props {
    showModalDelete: {
        show: boolean;
        id: number;
    },
    closeModalDelete: () => void         
}


export const ModalDeleteGuide: React.FC<Props> = ({ children, showModalDelete, closeModalDelete, }) => {


    const deleteGuide = () => {
        closeModalDelete()
        deleteGuidesById(showModalDelete.id).then((response) => {
            console.log(response);
          
        }).catch((error) => {
            console.error(error);
            throw error;
        });
    }

    return(

             <>
            {showModalDelete.show ?
                <>
           <div   aria-hidden="true" className="fixed top-0 z-40 inset-0 bg-gray-500 bg-opacity-75 transition-opacity "></div>

           <div className="fixed inset-0 z-50 overflow-y-auto ">
               <div className="flex min-h-full items-end justify-center p-4 sm:items-center sm:p-0">
                   <CardBox className="w-full max-w-lg">
                       {/* Modal header */}
                       <div className="flex justify-between items-start py-4 rounded-t border-b dark:border-gray-600 mb-4 px-6">
                           <h3 className="text-xl font-semibold text-gray-900 dark:text-white">Borrar ventaja</h3>
                           <button type="button" className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="defaultModal" onClick={closeModalDelete}>
                               <svg aria-hidden="true" className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                   <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd"></path>
                               </svg>
                               <span className="sr-only">Close modal</span>
                           </button>
                       </div>
                       {/* Modal body */}
                       <div className="p-6 space-y-6">
                       
                                   <div>
                                       <p className="text-neutral-600">¿Estas seguro de eliminar esta ventaja? Si es así pulsa sobre el botón Aceptar.</p>
                                   </div>
                                   

                                   <BaseDivider />

                                   <BaseButtons>
                                       <BaseButton onClick={() => deleteGuide()}  color="icofcv" label="Aceptar" />
                                       <BaseButton type="reset" color="icofcv" outline  onClick={closeModalDelete} label="Cancelar" />
                                   </BaseButtons>
                           
                       </div>
                   </CardBox>
               </div>
           </div>
       
  
      
   
           </>
      
    
      :null
    }
   </>
    )
    
}

///api
export async function deleteGuidesById(id): Promise<Guide[]>  { 
    console.log('id:',id)
    const filter = {
        "offset": 0,
        "limit": 500 ,
        "skip": 0,
        "fields": {
            "id": true,
            "creationDate": true,
            "creator": true,
            "title": true,
            "description": true,
            "publishDate": true,
            "documentPath": true,
            "imagePath": true,
            "enabled": true
        }
    };

    const response = await fetch(config.apiBaseUrl+`/guides/${id}?filter=`+encodeURIComponent(JSON.stringify(filter)), {
        method: "DELETE",
        headers: getHeaders()
    });

    const data = await response.json();

    if (response.ok) {
        return data;
    } else {
        return Promise.reject(response.status);
    }
}
5
  • Creo que el mensaje de error es bastante claro: la respuesta no es un documento JSON válido y falla al parsear Commented el 13 dic. 2022 a las 11:47
  • y alguna idea de como solucionarlo? Commented el 13 dic. 2022 a las 12:44
  • 2
    Usa response.text() para ver qué estás recibiendo Commented el 13 dic. 2022 a las 13:23
  • en vez del const data = await response.json() pongo response.text()? Commented el 14 dic. 2022 a las 6:19
  • 1
    es la idea, obtener el texto que hay en la respuesta. A veces el backend manda un "OK" como respuesta a un DELETE porque no hay nada que mostrar, por lo que no obtienes un JSON Commented el 14 dic. 2022 a las 13:03

1 respuesta 1

1

El error "SyntaxError: Unexpected end of JSON input" se produce cuando se intenta leer una respuesta de una petición HTTP como JSON, pero la respuesta no tiene un formato válido de JSON. Esto puede deberse a que la respuesta del servidor no está en formato JSON, o a que la respuesta tiene un formato JSON correcto pero está incompleta.

En tu código, estás intentando leer la respuesta de la petición que realizas para eliminar una guía mediante la función response.json(). Sin embargo, si la respuesta del servidor no tiene un formato válido de JSON, intentar leerla como JSON provocará el error "SyntaxError: Unexpected end of JSON input".

Para solucionar este problema, te sugiero que verifiques que la respuesta del servidor tenga un formato JSON válido y, si no es así, manejes el error de manera adecuada en tu código. Por ejemplo, puedes modificar la función deleteGuidesById para que verifique si la respuesta del servidor tiene un formato JSON válido y, en caso contrario, devuelva un error personalizado que puedas manejar en tu código.

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.