0
Uncaught SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.xhr.onload (app.js:138)

No he podido avanzar, necesito borrar un contacto de la base de datos pero me sale el error de arriba. Lo hago tal cual como dice la clase y me sale ese error.

Alguien me puede ayudar por favor? Muchas gracias.

este es el código de js.

const formularioContactos = document.querySelector('#contacto'),   //Nueva sintaxis de Javascript. Se coge el id de contacto que esta en editar.php
      listadoContactos = document.querySelector('#listado-contactos tbody');

eventListeners();  //Funcion que se usa para llamar una vez que se ejecute el codigo//

function eventListeners() {
   //cuando el formulario de editar o crear se ejecuta
   formularioContactos.addEventListener('submit', leerFormulario); //cuando alguien de click en añadir o en editar, se ejecutala funcion leer formulario. ES UNA FUNCION

   //listener para eliminar boton
   listadoContactos.addEventListener('click', eliminarContacto);
}

function leerFormulario(e){    //prevenir la accion por default es añadir una e detro del parentesis
    e.preventDefault();
    // console.log('presionaste');  Revisa si sirve el boton
    //Leer los datos de los inputs
    const nombre = document.querySelector('#nombre').value,  //lee los datos del ID que estan en formulario. Para poder que funcione traigo el valor del input que se llama value. Compruebo si los valores tienen algo
          empresa = document.querySelector('#empresa').value,
          telefono = document.querySelector('#telefono').value,
          accion = document.querySelector('#accion').value; //Esta accion viene de la parte de formulario y con el boton añadir.
    //console.log(nombre); compruebo si los valores tienen algo
    if(nombre === '' || empresa === '' || telefono === ''){ 
        //2 parametros texto y clase
        mostrarNotificacion('Todos los campos son obligatorios', 'error');   // Se crea el parametro y va a la parte de la function mostrarNotificacion con una clase 'error'  //Esta notificacion se muestra gracias a lo que se creo abajo NOTIFICACION PANTALLA                               //console.log('Los campos estan vacios'); //forma sencilla de validar para ver si hay algo en el formulario
    } else {
         //pasa la validacion y crear el llamado a AJAX   //console.log('Tienen algo');
         const infoContacto = new FormData();  //Forma para leer los datos de un formulario
         infoContacto.append('nombre', nombre); //se utiliza la funcion append y se pasa la llave 'nombre' y el valor seria la variable de nombre y viene de la parte de arriba.
         infoContacto.append('empresa', empresa);
         infoContacto.append('telefono', telefono);
         infoContacto.append('accion', accion); //me va a decir si es editar o crear

        //console.log(...infoContacto); //aparece que esta vacio

          if(accion === 'crear'){ //este crear sale del boton de añadir que esta en el hiiden
            //crearemos un nuevo contacto
            insertarBD(infoContacto);  //se crea una funcion que se llama insertarBD y va a tomar el form data
          } else {
              //editar contacto
          }
  }
}
//inserta en la base de datos via AJAX
function insertarBD(datos) {   //se ejecuta una funcion y toma como parametro unos datos puede ser INFOCONTACTO o solo datos
//llamado a AJAX

//crear el objeto
const xhr = new XMLHttpRequest();

//abrir la conexion
xhr.open('POST', 'inc/modelos/modelo-contactos.php', true);  //primero el tipo de peticion que es: POST.Se utiliza cuando insertas algo a la BD en un formulario y GET es para obtener algo que esta en el servidor

//pasar los datos
xhr.onload = function() {  //leer la respuesta
  if(this.status === 200) { //quiere decir que la conexion fue exitosa
     console.log(JSON.parse( xhr.responseText) ); //convierte el string a json los () para acceder a los valores individualmente
     //leemos la respuesta de PHP
     const respuesta = JSON.parse( xhr.responseText); //creo una variable con nombre respueta. En este caso se muestra un objeto. 

          //inserta un nuevo elemento a la tabla                                                                  //console.log(respuesta.empresa); //el .empresa.nombre.telefono porque lo que viene siendo JSON parse lo convierte a objeto de JS
           const nuevoContacto = document.createElement('tr');

           nuevoContacto.innerHTML =`            
               <td>${respuesta.datos.nombre}</td>
               <td>${respuesta.datos.empresa}</td>
               <td>${respuesta.datos.telefono}</td>
           `;       // los template strings son la nueva forma de cocatenar valores         

           //crear contenedor botones
           const contenedorAcciones = document.createElement('td');

           //crear el icono de editar
           const iconoEditar = document.createElement('i');
           iconoEditar.classList.add('fas', 'fa-pen-square');

           //crea el enlace para editar
           const btnEditar = document.createElement('a');
           btnEditar.appendChild(iconoEditar);
           btnEditar.href = `editar.php?id=${respuesta.datos.id_insertado}`;
           btnEditar.classList.add('btn', 'btn-editar');

        //agregarlo al padre
        contenedorAcciones.appendChild(btnEditar);

        //crear el icono de eliminar
        const iconoEliminar = document.createElement('i');
        iconoEliminar.classList.add('fas', 'fa-trash-alt');

        //crear el boton de eliminar
        const btnEliminar = document.createElement('button');
        btnEliminar.appendChild(iconoEliminar);
        btnEliminar.setAttribute('data_id', respuesta.datos.id_insertado);
        btnEliminar.classList.add('btn', 'btn-borrar');

        //agregarlo al padre
        contenedorAcciones.appendChild(btnEliminar);

        //agregarlo al tr
        nuevoContacto.appendChild(contenedorAcciones);

        //agregarlo con los contactos
        listadoContactos.appendChild(nuevoContacto);

        //resetear el formulario
        document.querySelector('form').reset();    //quiero que me retorne un formulario y metodo de js para restear el formulario
        //mostrar Notificacion

        mostrarNotificacion('Contacto Creado Correctamente', 'correcto'); //Primero toma el mensaje y despues la clase
    } 
}

//enviar los datos
xhr.send(datos);  //le paso los datos que quiero enviar. POST agregar nuevos datos a lo que ya existe
}

*****//eliminar el contacto*****
function eliminarContacto(e) {
    if(e.target.parentElement.classList.contains('btn-borrar')) {  

     //tomar el id
     const id = e.target.parentElement.getAttribute('data_id');
     //console.log(id);
     //preguntar al usuario
     const respuesta = confirm('Estas seguro?');

     if(respuesta) {
         //llamado a AJAX
         //crear el obejto
        const xhr = new XMLHttpRequest();

         //abrir la conexion
        xhr.open('GET', `inc/modelos/modelo-contactos.php?id=${id}&accion=borrar`, true);

         //leer la respuesta
         xhr.onload = function() {
             if(this.status === 200) {
                 **const resultado = JSON.parse(xhr.responseText);**

            console.log(resultado);
             }
         }
         //enviar la peticion
         xhr.send(); //cuando se envia por POST se agrega la variable
     }
   }
}

//Notificacion en pantalla
function mostrarNotificacion(mensaje, clase) { //Todos los campos son obligatorios pasa a ser un mensaje con la clase   //crear la funcion y se le pone mostrarNotificacion
    const notificacion = document.createElement('div'); //se crea una variable con nombre notificacion 
    notificacion.classList.add(clase, 'notificacion', 'sombra'); //creo una nueva clase llamado notificacion, le doy un nombre y genero un div, una clase y un contenido. Esto ayuda para que desaparezca ya que se creo en css. Es clase genera error o exito
    notificacion.textContent = mensaje;  //y ese mensaje pasa a ser parte del text content. Se reemplaza hubo un error    //se crea una notificacion conel texto

    //Formulario
    formularioContactos.insertBefore(notificacion, document.querySelector('form legend'));  //este formulario contiene el form. 1.Toma lo QUE  se va a insertar. 2. y DONDE se va a insertar. ENTONCES voy a insertar la notificacion y DESPUES en el lado que quiero. va antes de nombre, empresa, telefono

    //Ocultar y mostrar la notificacion
    setTimeout(() => {    //Es una funcion que va a esperar cierto tiempo en ejecutar un codigo
        notificacion.classList.add('visible');       //le va a agregar una clase visible. forma de javascript para escribir
    setTimeout(() => {
        notificacion.classList.remove('visible');  
         setTimeout(() => {
            notificacion.remove(); //hace que JS remueva la notificacion cuando ya no se usa
        }, 500);
    }, 3000); //3000 a partir de 3 segundos desaparece

    }, 100); //100 es una decima parte de un segundo
}
2
  • ¿Que esta devolviendote la llamada a la API? parece que el fallo viene de ahi. Commented el 1 mar. 2019 a las 23:50
  • Hola francisco, pues yo cambie todo por metodo GET y me funciono, pero ya despues iba a validar los campos y me marco error otra vez. Commented el 3 mar. 2019 a las 2:40

1 respuesta 1

0

El error esta en que la cadena devuelto por la API no tiene formato correcto.

Puedes intentar convertiendo tu cadena a JSON:

xhr.onload = function() {
  if(this.status === 200) {

     //Convertir cadena a JSON
     const myJson = JSON.stringify(xhr.responseText);

     const respuesta = JSON.parse(myJson);

     console.log(respuesta);
  }
}

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.