38585


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

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

[code]

    ●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
    
[/code]

◇test.ts

[code]

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

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

[code]

      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]);
          });
      }
    
[/code]

◇http.service.ts

[code]

    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[]) もともとはこのソースでしたが、エラーになるので上記でログを埋め込みました。
        }
    }
    
[/code]

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

[code]

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

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

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

◇in-memory-data.service.ts

[code]

    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
            };
        }
    }
    
[/code]


CC BY-SA 3.0
2017-10-11T02:34:34.067
38579
2017-10-11T04:03:33.153
12842
question
json typescript angular4
Angular4でHTTP通信（this.http.get(url)）で取得したresponseがundefinedになる


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

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


CC BY-SA 3.0
2017-10-11T04:03:33.153
38585
2017-10-11T04:03:33.153
3655
38579
answer