web-dev-qa-db-fra.com

SyntaxError non interceptée: jeton U inattendu dans JSON à la position 0 sur JSON.parse (<anonymous>) sur Response.Body.json

Je travaille sur un projet angular2. Je suis coincé avec ces erreurs. L'erreur s'est produite lorsque j'ai essayé d'envoyer les objets JSON au backend. Cela peut être dû à l'analyse des objets JSON. Je suis nouveau sur angualar, alors s'il vous plaît, aidez-moi

Signup.service.ts

import {Injectable} from '@angular/core'; 
import {Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map' ;
@Injectable()
    export class SignupService{
        constructor (private http: Http){}  
        insertform(newreg: any ){
            console.log();
            var headers = new Headers ();
            headers.append('Content-Type','application/json');
            return this.http.post('http://localhost:3000/api/users', JSON.stringify(newreg),{headers: headers})
            .map(res=> res.json());
         }
     }

signup.component.ts

import { Component, AfterViewInit } from '@angular/core';
import {SignupService} from '../../services/signup.service';
import {Signup} from '../../../signup';
declare var $: any;
 @Component({
 moduleId: module.id,
 selector: 'signup',
 templateUrl: 'signup.component.html',
  providers: [SignupService]
 })
 export class SignupComponent {
 datas: Signup[];
 data: any;
 first_name: string;
 last_name: string;
 address: string;
 email: string;
 pwd:string;
 pwdcnf:string;
 phone:number;
 constructor(private signupService: SignupService){ };
 ngAfterViewInit() {
    $('#textarea1').trigger('autoresize');
   };
     regformSubmit(event: any){
    event.preventDefault(); 
    var newreg = {
     first_name: this.first_name,
      last_name: this.last_name,
     email: this.email,
     address: this.address,
     phone: this.phone,
    pwd:this.pwd,
    pwdcnf:this.pwdcnf
   };
    this.signupService.insertform(newreg)
      .subscribe (data => {
       this.datas.Push(data);
        this.first_name='';
         this.last_name ='';
         this.email='';
        this.address='';
         this.phone=0;
    this.pwd='';
    this.pwdcnf='';
      });     
  } 
 }

signup.component.html

 <div class="container light-blue lighten-5">
<form class="col s12" (ngSubmit)="regformSubmit($event)">
  <div class="row">
    <div class="input-field col s6">
      <input  id="first_name" type="text" class="validate" [(ngModel)]="first_name" name="first_name" required>
      <label for="first_name">First Name</label>
    </div>
    <div class="input-field col s6">
      <input id="last_name" type="text" class="validate" [(ngModel)]="last_name" name="last_name" required>
      <label for="last_name">Last Name</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s12">
      <textarea id="textarea1" class="materialize-textarea" [(ngModel)]="address" name="address" required></textarea>
      <label for="disabled">Address</label>
    </div>
  </div>
  <div class="row ">
    <div class="input-field col s5">
      <input id="password" type="password" class="validate" [(ngModel)]="pwd" name="pwd" required>
      <label for="password">Password</label>
    </div>
    <div class="input-field col s5 offset-s2">
      <input id="password1" type="password" class="validate" [(ngModel)]="pwdcnf" name="pwdcnf" required>
      <label for="password1">Confirm password</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s5">
      <input id="email" type="email" class="validate" [(ngModel)]="email" name="email" required>
      <label for="email">Email</label>
    </div>
    <div class="input-field col s5 offset-s2">
      <input id="password2" type="number" class="validate" [(ngModel)]="phone" name="number" required>
      <label for="password2">Phone</label>
    </div>
  </div>
 <div class="row">
     <div class="input-field col s4 offset-s5">
         <button class="btn waves-effect waves-light" type="submit" name="action">Submit
            <i class="material-icons right">send</i>
        </button>
      </div>
 </div>
</form>
 </div>
 <style>
  .ng-invalid {
   border-bottom-color: red;
  }
</style>

Le message d'erreur complet est

EXCEPTION: Unexpected token U in JSON at position 0
ORIGINAL STACKTRACE:
yntaxError: Unexpected token U in JSON at position 0
at JSON.parse (<anonymous>)
at Response.Body.json (http.umd.js:777)
at MapSubscriber.eval [as project] (signup.service.ts:13)
at MapSubscriber._next (map.ts:75)
at MapSubscriber.Subscriber.next (Subscriber.ts:95)
at XMLHttpRequest.onLoad (http.umd.js:1180)
at ZoneDelegate.invokeTask (zone.js:275)
at Object.onInvokeTask (core.umd.js:3971)
at ZoneDelegate.invokeTask (zone.js:274)
at Zone.runTask (zone.js:151)
at XMLHttpRequest.ZoneTask.invoke (zone.js:345)
Uncaught SyntaxError: Unexpected token U in JSON at position 0
at JSON.parse (<anonymous>)
at Response.Body.json (http.umd.js:777)
at MapSubscriber.eval [as project] (signup.service.ts:13)
at MapSubscriber._next (map.ts:75)
at MapSubscriber.Subscriber.next (Subscriber.ts:95)
at XMLHttpRequest.onLoad (http.umd.js:1180)
at ZoneDelegate.invokeTask (zone.js:275)
at Object.onInvokeTask (core.umd.js:3971)
at ZoneDelegate.invokeTask (zone.js:274)
at Zone.runTask (zone.js:151)
at XMLHttpRequest.ZoneTask.invoke (zone.js:345)
javascriptjsonangularmean-stack
4
Karthik

Je vois normalement cela lorsque le serveur renvoie une erreur (par exemple, une erreur de serveur 500). Le problème est que le serveur renvoie du texte brut ou parfois même du HTML, puis que l'application cliente essaie de l'analyser en JSON, lançant ainsi l'erreur. Je recommanderais d'ouvrir les outils de développement chrome, accédez à l'onglet réseau, actualisez la page, puis recherchez la demande en question et voyez ce qui est réellement renvoyé par le serveur.

Ça devrait ressembler a quelque chose comme ca. Je suppose que le texte de droite ne sera pas JSON.

Chrome debugger

11
mparis

le "u" il y a la première lettre de non défini. Cela se produit car un json est attendu et un indéfini est obtenu.

4
Shashank Bodkhe

Lisez attentivement la pile d'appels; le crash est sur cette ligne:

        .map(res=> res.json());

L'analyseur JSON ne parvient pas à comprendre la réponse du serveur. Vérifiez si vous pouvez déterminer la réponse du serveur (le POST to http://localhost:3000/api/users) renvoie. La réponse commence censément par 'U', qui ne peut pas être un JSON valide.

3
Jacob Krall
return this.http.post('http://localhost:3000/api/users', JSON.stringify(newreg),{headers: headers})
            .map(res=> res.json());

L'API backend à http: // localhost: 3000/api/users a un type de retour qui n'est pas JSON, dans votre cas String commençant par la lettre 'U'. Assurez-vous que le back-end renvoie des données json en utilisant res.json("Your text here"); Ceci est dû au fait que votre fonction de carte .map(res=> res.json()); attend une réponse json

1
Manoj

Merci à @Jacob Krall d'avoir indiqué la raison:

J'obtenais la même erreur pour le code suivant

this.http.post(URL, formData).map((res: Response) => res.json()).subscribe(
(success) => {
    alert(success);
},
(error) => alert(error))

Raison: Je n'envoyais pas de données json depuis le serveur lui-même, donc ça plantait pour la ligne res.json()

Solution: Retourne la réponse json du serveur, cela devrait fonctionner correctement.

remplacé le suivant

return res.send("Upload Completed for " + path);

avec,

return res.json("Upload Completed for " + path);
0
immirza