0

Buenas tengo una consulta, me sale este error en consola. error: SyntaxError: Unexpected non-whitespace character after JSON at position 149 (line 2 column 1)

Estoy enviando el correo y la clave desde la aplicacion movil al backend para que se almacenen en la base de datos, los datos se almacenan correctamente pero al parecer hay un problema con el parseo a JSON según lo que he leído pero no puedo solucionarlo.

esta es mi funcion en el ts:

  this.login_registro.almacenarUsuario(this.email, this.password)
    .subscribe({
      next: response => {
        console.log('Usuario registrado correctamente:', response);
        console.log(this.email, this.password);
      },
      error: error => {
        console.error('Error al registrar usuario:', error);
      }
    });
}

Esta es del service:
almacenarUsuario(email: string, password: string): Observable<any> {
  const url = `${this.url}?m=login&f=almacenarUsuario`; 
  const formData = new FormData();
  formData.append('email', email);
  formData.append('clave', password); 
  return this.http.post(url, {email:email, clave:password}, {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
  });
  

y esta en  mi función de php:

  public function almacenarUsuario() {
      $postdata = json_decode(file_get_contents('php://input'));
      if ($postdata && isset($postdata->email) && isset($postdata->clave)) {
          $hashed_password = password_hash($postdata->clave, PASSWORD_DEFAULT);
          $this->ws_model->almacenarUsuario($postdata->email, $hashed_password);
          
          // Devolver una respuesta en formato JSON
          echo json_encode(array(
              'success' => true,
              'message' => 'Usuario almacenado correctamente',
              'email' => $postdata->email,
              'clave' => $hashed_password
          ));
      } else {
          // Si los datos no están presentes o son nulos
          echo json_encode(array(
              'success' => false,
              'message' => 'No se han recibido datos válidos'
          ));
      }
  
  }

Como respuesta en red tengo lo siguiente: {"success":true,"message":"Usuario almacenado correctamente","email":"cxv","clave":"$2y$10$DMVyl4f4ogtWX6PHqZDbMeJH6.yRKGw8UfqTs\/ZdsK4QfcSYaQt2u"}

Si bien me almacena los datos correctamente en la base de datos, no se por que me sale ese error de parseo en la consola. 

Cabe mencionar que el Backend esta en PHP8 y CODEIGNITER4, el frontend esta en ionic 6 , angular 15, node js 19.
4
  • Hola, en PHP conviene que pongas un exit(); como última línea del código, después de hacer el echo json_encode(); Eso evitará que se agreguen saltos de línea por ejemplo, son invisibles en la consola, pero rompen el JSON. Además de eso, supongo que en ese flujo de código no hay ninguna otra salida por pantalla, de ningún tipo. JSON es muy delicado, y cualquier cosa lo rompe. Otra cosa, ¿por qué en la llamada this.http.post pasas {email:email, clave:password} a mano? Se supone que si los pusiste en formData era para pasar luego formData que ya contiene esos valores.
    – A. Cedano
    Commented el 3 oct. 2023 a las 19:07
  • Hola muchas gracias me sirvio tu ayuda ya no sale el error en consola, en cuanto a la pregunta, soy nuevo en esto jaja como seria entonces la forma correcta?
    – Jeasson
    Commented el 3 oct. 2023 a las 19:15
  • Ahora te lo digo en una respuesta.
    – A. Cedano
    Commented el 3 oct. 2023 a las 19:15
  • oka tendria que cambiar tambien entonces la forma en que se reciben en la funcion de php cierto? espero tu respuesta muchas gracias
    – Jeasson
    Commented el 3 oct. 2023 a las 19:24

1 respuesta 1

0

La posición 149 de la respuesta que estás teniendo es justo lo que hay después del carácter } que cerraría tu JSON.

¿Y qué puede haber ahí?

Pues cualquier cosa que se te haya escapado, como un salto de línea, algún carácter oculto en tu archivo .php, u otro. JSON es muy delicado, se rompe si en el flujo entra algo que no sea parte de él, por eso debes controlar.

Para casos como este, conviene que pongas exit(); al final, después del echo del JSON.

Otra cosa, si estás usando FormData, mete todo lo que quieras mandar al servidor en el FormData, incluyendo los datos que adhieres a la URL, y pasa ese objeto en la llamada. O, no declares un FormData si no lo vas a usar.

Veamos como aplicar ambas cosas:

PHP

Crearemos una variable llamada $json y haremos echo al final, así no repetimos el exit(). Además, conviene poner una cabecera e indicar el charset, los JSON se rompen a veces cuando hay problemas con carácteres especiales y no indicas charset.

  public function almacenarUsuario() {
      $postdata = json_decode(file_get_contents('php://input'));
      if ($postdata && isset($postdata->email) && isset($postdata->clave)) {
          $hashed_password = password_hash($postdata->clave, PASSWORD_DEFAULT);
          $this->ws_model->almacenarUsuario($postdata->email, $hashed_password);
          
          // Devolver una respuesta en formato JSON
          $json = json_encode(array(
              'success' => true,
              'message' => 'Usuario almacenado correctamente',
              'email' => $postdata->email,
              'clave' => $hashed_password
          ));
      } else {
          // Si los datos no están presentes o son nulos
          $json= json_encode(array(
              'success' => false,
              'message' => 'No se han recibido datos válidos'
          ));
      }
      header("Content-type: application/json; charset=utf-8");
      echo $json;
      exit();     
  }

Angular

Estás metiendo datos en la URL:

const url = `${this.url}?m=login&f=almacenarUsuario`; 

Al hacer eso, estarías mandando por método GET el valor de login asociado a la clave m y el valor de almacenarUsuario asociado a la clave f. Aunque luego no veo que uses esos datos en el servidor. Si no los vas a usar, no los mandes.

Luego, mandas los otros datos en la llamada:

this.http.post(url, {email:email, clave:password}

Ahí estás mandando el valor de email asociada a la clave email y el valor de password asociado a la clave clave.

Pero, ¿para qué declaraste el FormData y le metiste datos?

Tú puedes hacer algo así:

almacenarUsuario(email: string, password: string): Observable<any> {
  const formData = new FormData();
  formData.append('email', email);
  formData.append('clave', password); 
  return this.http.post(this.url, formData, {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
  });

Ahora el post queda así: this.http.post(this.url, formData, como URL le pasamos el valor de this.url y pasamos formData que ya contiene los datos.

Si necesitaras pasar esto (lo cual no usas, ni lo veo en tu contexto) m=login&f=almacenarUsuario agrégalo a formData;

  const formData = new FormData();
  formData.append('email', email);
  formData.append('clave', password); 
  formData.append('m', login); 
  formData.append('f', almacenarUsuario);

O, si no vas a usar FormData, creas tu objeto y lo mandas:

this.http.post(this.url, {email:email, clave:password, m:login, f: almacenarUsuario},

Se trata de dar uniformidad al código, y de no declarar cosas para no usarlas y no enviar cosas que no vas a usar.

1
  • entendido aplicare tus consejos muchas gracias por la ayuda de verdad me ayudaste bastante a entender mejor el código!!
    – Jeasson
    Commented el 3 oct. 2023 a las 20:16

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.