web-dev-qa-db-ja.com

キャッチされないSyntaxError：Response.Body.jsonのJSON.parse（<anonymous>）の位置0にあるJSONの予期しないトークンU

Angular2プロジェクトに取り組んでいます。これらのエラーに悩まされています。 JSONオブジェクトをバックエンドに送信しようとしたときにエラーが発生しました。 JSONオブジェクトの解析が原因である可能性があります。私はアンガラールが初めてなので、助けてください

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>

完全なエラーメッセージは

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

通常、サーバーがエラー（500サーバーエラーなど）を返したときにこれが表示されます。問題は、サーバーがプレーンテキストまたは場合によってはHTMLを返し、クライアントアプリがサーバーからJSONを解析しようとしてエラーがスローされることです。 chrome開発ツールを開き、ネットワークタブに移動してページを更新し、問題のリクエストを探して、サーバーから実際に何が返されているかを確認することをお勧めします。

次のようになります。私の推測では、右側のテキストはJSONではありません。

Chrome debugger

11
mparis

"u"にはndefinedの最初の文字があります。これは、jsonが予期され、未定義が取得されるために発生しています。

4
Shashank Bodkhe

呼び出しスタックをよく読んでください。クラッシュはこの行にあります：

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

JSONパーサーがサーバーからの応答を理解できません。サーバー（POST to http://localhost:3000/api/users）が送り返している応答を把握できるかどうかを確認してください。応答は'U'で始まる可能性があり、有効なJSONではありません。

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

http：// localhost：3000/api/users のバックエンドAPIには、JSONではない戻り値の型があります。この場合、文字列は 'U'で始まる文字列です。バックエンドがres.json("Your text here");を使用してjsonデータを返すことを確認してくださいこれは、マップ関数.map(res=> res.json());がjson応答を期待しているためです

1
Manoj

理由を指摘してくれた@Jacob Krallに感謝します。

次のコードでも同じエラーが発生しました

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

理由：サーバー自体からjsonデータを送信していないため、行res.json()でクラッシュしました

ソリューション：サーバーからjson応答を返すと、正常に動作するはずです。

以下を交換

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

と、

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