JSONからTypescriptマップへのJavaマップ

2016-12-17 json angular typescript

私のサーバー側には、HashMapを含むJavaオブジェクトがあります。 JSONにシリアル化し、Angular2クライアントに返して、そこでMap / Dictionaryとして使用したいと思います。

ここにクラスがあります:

public class FileUploadResult {
    String timestamp;
    String message;
    String status;
    HashMap<String, String> parameters;

    public FileUploadResult(String status, String message, String timestamp, HashMap parameters) {
        this.status = status;
        this.message = message;
        this.timestamp = timestamp;
        this.parameters = parameters;
    }

}

クライアント側で受け取るJSONは次のとおりです。

{"timestamp":"","message":"Test","status":"1","parameters":{"myKey":"Value","mySecondKey":"Another Value"}}

これが私の受信Angular2 http呼び出しです:

this.http.post(this.uploadURL, formData).map((res:Response) => res.json() as FileUploadResult).catch(this.handleError); 

クライアントのFileUploadResultは次のようになります。

export class FileUploadResult {
    status: string;
    timestamp: string;
    message: string;
    parameters: Map<string, string>;

    constructor() {
        this.parameters = new Map<string, string>();
    }

    addParameter(key: string, value: string) {
        this.parameters.set(key, value);
    }

    getParameters() {
        return this.parameters;
    }
}

http.map呼び出しで "as FileUploadResult"を使用することにより、 result.getParameters().get("myKey")呼び出すことができる場所でオブジェクトを取得することを期待していました。しかし、それは起こっていません。動作しない唯一の呼び出しがresult.parameters.myKeyである指定されていないオブジェクトを取得します。私が望むものを達成し、Angular2マップを含むJSONオブジェクトをFileUploadResultにキャストする方法はありますか?

Answers

res.json()を呼び出した結果は、次のようにアクセスできるjavascriptオブジェクトです。

let json = res.json();
console.log(json["timestamp"]);
console.log(json.message);

typescriptでそのようなオブジェクトを記述する方法は、インターフェース(または型エイリアス)を使用することです:

interface JsonResponse {
    timestamp: string;
    message: string;
    status: string;
    parameters: { [name: string]: string };
}

このオブジェクトをクラスに変換する場合は、次のようにする必要があります。

class FileUploadResult {
    status: string;
    timestamp: string;
    message: string;
    parameters: Map<string, string>;

    constructor(json: JsonResponse) {
        this.status = json.status;
        this.timestamp = json.timestamp;
        this.message = json.message;

        this.parameters = new Map<string, string>();
        Object.keys(json.parameters).forEach(key => {
            this.addParameter(key, json.parameters[key]);
        });
    }

    addParameter(key: string, value: string) {
        this.parameters.set(key, value);
    }

    getParameters() {
        return this.parameters;
    }
}

遊び場のコード

 class FileUploadResult {
    parameters: Record<string, string> = {};

    addParameter(key: string, value: string) {
       this.parameters[key] = value;
    }
}

このように使えます

const abc = new FileUploadResult();
abc.addParameter('hi', 'hello');
console.log(abc.parameters);   // will log {hi: "hello"}

https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkt

Related