0

Angular4でHTTP通信(this.http.get(url))で取得したresponseがundefinedになってしまいます。

以下ソースにログを埋め込んでみたのですが、
キャストの仕方が正しくないのでしょうか?

●getTest test: undefined
◎箇所でエラーが発生してしまいます。
ERROR Error: Uncaught (in promise): TypeError: Cannot read property '0' of undefined
TypeError: Cannot read property '0' of undefined

▲<Test[]>response.json() :[object Object]
▲response.json() :[object Object]
▲response.json().data :undefined
▲response.json().data ret :undefined

◇test.ts

export class Test {
    constructor(
        private Time: string,
        private Id: number,
        private TestData: {
            Mode: number,
            Status: number,
            Flag: boolean
        }) {
    }
}

◇サービス呼び出しコンポーネント

  private getTest(): void {
    this.httpService.requestGet(url)
      .then(test => {
        console.log('getTest test:', test);●
        var data: Test = test[0] as Test;◎
        console.log('getTest data:', test[0]);
      });
  }

◇http.service.ts

import { Injectable } from '@angular/core';
import { Headers, RequestOptions, Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';

import { Test } from './test';

@Injectable()
export class HttpService {
    constructor(private http: Http) { }

    requestGet(url: string): Promise<Test[]> {
        return this.http.get(url)
            .toPromise()
            .then(response => {
                console.log('response :' + response);▲
                console.log(' <Test[]>response.json() :' + <Test[]>response.json());▲
                console.log('response.json() :' + response.json());▲
                console.log('response.json().data :' + response.json().data);▲
                var ret = response.json().data as Test[];
                console.log('response.json().data ret :' + ret);▲
                return ret;
            })
//            .then(response => response.json().data as Test[]) もともとはこのソースでしたが、エラーになるので上記でログを埋め込みました。
    }
}

デベロッパーツールでResponseをみるとWEB APIの応答として以下ががえっていました。

[{ "TestData" : { "Flag" : true , "Status" : 1.0 , "Mode" : 0.0 } , "Time" : { "$date" : "2017-10-11T06:36:40.000Z"} , "Id" : 1.0}]

また、疑似的にHTTP確認をInMemoryWebApiModuleで行った場合は問題なく取得できていました。

https://github.com/angular/in-memory-web-api

◇in-memory-data.service.ts

import { InMemoryDbService } from 'angular-in-memory-web-api';
export class InMemoryDataService implements InMemoryDbService {
    createDb() {
        const test = [
            {
                Time: '1474958200000', Id: 0,
                TestData: {
                    Mode: 1, Status: 0, Flag: true
                },
            },
            {
                Time: '1474958200000', Id: 1,
                TestData: {
                    Mode: 1, Status: 0, Flag: true
                },
            },
        ];
        return {
            'Test': test
        };
    }
}

1 件の回答 1

0

この場合はresponse.json() as Test[];とすると良いでしょう。

公式チュートリアルを参考にしてresponse.json().data as Test[];というコードにしているのだと思います。
チュートリアルではどのようなレスポンスのデータなのか明記されていないのですが、{"data": []}のようなデータのためresponse.json().dataとしているのでしょう。

1
  • shimiteiさまコメントありがとうございます。まさにその通りでした。HTTPサービス側でご指摘通りに修正したところ無事取得できました。
    – kanko
    Commented 2017年10月11日 5:29

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。