web-dev-qa-db-ja.com

Angular 2からCodeigniterへのHttp getリクエストでのJSON入力の予期しない終了

Angular 2とCodeigniter Hello World Programは完全に実行されています。しかし、Angular 2からCodeigniter Controller "Entry.php"にHttp getリクエストを送信しているときにエラー「予期しないJSON入力の終了」が発生します。Plunkerコードはこのリンクにあります：

https://plnkr.co/edit/MHVVkWwFqEggqSI5b6B2?p=info

同じコードがここにも貼り付けられています：app.module.ts

import { NgModule }            from '@angular/core';
import { BrowserModule }       from '@angular/platform-browser';
import { HttpModule } from "@angular/http";
import { AppComponent }        from './app.component';
import { EntryService }        from './entry.service';

@NgModule({
  imports: [
    BrowserModule,
    HttpModule
  ],
  declarations: [
    AppComponent
  ],
  exports: [ // export for the DemoModule
    AppComponent
  ],
  providers: [ EntryService], 
  bootstrap: [ AppComponent ]
})
export class AppModule { }

app.component.ts

import { Component, OnInit} from '@angular/core';
import { EntryService} from './entry.service';

@Component({  
  selector: 'my-app',
  template: `
      <h3>{{ errorMsg }} </h3>      
      <ul>
          <li *ngFor="let s of scripts">{{ s.price }}</li>
      </ul>
  `,
})

class formEntry{  
  constructor(price: number, qty: number){}    
}
export class AppComponent implements OnInit{

    errorMsg: string;
    data: formEntry;
    constructor(private _entService: EntryService) { }

    ngOnInit()
    {
        console.log('In OnInit: ');        
        this._entService.getData()
            .subscribe(data => this.data = data,
                        resError => this.errorMsg = resError);            
    }
}

entry.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers, Response}  from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';

@Injectable()
export class EntryService { 

     constructor(private _http: Http) { } 

     getData(){

        let myUrl = 'http://localhost/analy/entry/getData';
        return this._http.get(myUrl)
            .map((res: Response ) => res.json())
            .catch(this._errorHandler);
      } 
      _errorHandler(error: Response){
          console.error(error);
          return Observable.throw(error || "Server Error");
      }
}

Entry.php

class Entry extends CI_Controller
{
    function __construct()
    {
        parent::__construct();      

        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Headers: X-Requested-With');
        header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
    }

    function getData(){
        $data = array('price' => 999,
               'qty' => 8);                
        $jdata = json_encode($data);                       
        return ($jdata);
    }
}

私はwebpack 2を使用しています。コードはplnkrでは機能せず、システムで機能しています。しかし、それはmydata.jsonファイルに対しては完全に機能していますが、（entry/getData）（entry.service.tsから）へのgetリクエストに対してエラーを出します。 getDataはEntry.phpコントローラーのメソッドです。

考えられる原因と考えられる解決策は何ですか？。???誰でも問題を解決するために私を助けてください。

jsonangulargetcodeigniter-3
6
Ramji Makwana

Null値をJSONとして解析しようとしています

_return this._http.get(myUrl)
        .map((res: Response ) => res.json())
        .catch(this._errorHandler);
_

Resがnull /未定義/空の文字列の場合、エラーが発生します。 res.json()を実行する前にresの値を確認するだけで、エラーは発生しません。これを確認するには、解析する前にconsole.log(res)を作成してください。

6
Gianluca Paris

angular 4を使用してこの問題に遭遇しただけで、アップグレードして新しいHttpClient from @ angular/common/httpを使用しました

HttpClientの興味深い点は、応答に対して自動的に.json（）を実行することです。これは、APIが空の応答を返すときに問題を引き起こします。次にJsonの予期しない終了エラーが発生します。解決策は、responseTypeをテキストとして設定することです。

http.get(url, { responseType: 'text' })
15
seescode