web-dev-qa-db-ja.com

Angular2ネストされたJSON配列をモデルにマッピング

Webからの応答であるネストされたjson配列をAngular2のモデル配列にマッピングできません。次のようにjson配列の応答があると仮定します：

[{
    "base_url": "http://mysearch.net:8080/",
    "date": "2016-11-09",
    "lname": "MY PROJ",
    "name": "HELLO",
    "description": "The Test Project",
    "id": 10886789,
    "creationDate": null,
    "version": "2.9",
    "metrics": [{
        "val": 11926.0,
        "frmt_val": "11,926",
        "key": "lines"
    },
    {
        "val": 7893.0,
        "frmt_val": "7,893",
        "key": "ncloc"
    }],
    "key": "FFDFGDGDG"
}]

リンクを参照するフィールドを手動でマップしようとしました Angular 2 observableはモデルに「マップ」しません 私のモデルにngFor .....を反復することでHTMLでそれらを表示することができましたしかし、nclocとlinesの値もHTMLにも表示したいのですが、上記のリンクで述べたように、それらの値をモデル配列にマップする方法がわかりません。これで私を助けてもらえますか？

ありがとう。

[〜＃〜] edit [〜＃〜]

モードクラス

export class DeiInstance { 
    base_url: string;
    date: string;
    lname : string;
    name : string;
    id : number;
    key:string;

    constructor(obj: DeiInstance) {
        this.sonar_url = obj['base_url'];
        this.lname = obj['lname'];
        this.name = obj['name'];
        this.id = obj['id'];
        this.key = obj['key'];
        this.date = obj['date'];
    } 

    // New static method. 
    static fromJSONArray(array: Array<DeiInstance>): DeiInstance[] {
        return array.map(obj => new DeiInstance(obj));
    } 
 }
arraysjsonangularobservable
11
PingPong

モデルとマッピングを大幅に簡素化できます。 APIレスポンスを手動でマッピングする必要はありません。 JavaScript/TypeScriptがこれを行います。

まず、複数のインターフェースが必要です。

export interface DeiInstance { 
    base_url: string;
    date: string;
    lname: string;
    name: string;
    description: string;
    id: number;
    creationDate: string; //probably date
    version: string
    metrics: Metric[];
    key: string;
 }

 export interface Metric {
      val: decimal;
      frmt_val: decimal;
      key: string;
 }

その後、TypeScriptのas- "operator"を使用して、API応答をDeiInstanceタイプにキャストできます。

 sealSearch(term: string): Observable<DeiInstance[]> {
      return this.http.get(this.sealUrl + term)
           .map(response => response.json() as DeiInstance[])
           .catch(this.handleError);
 }

クラスの代わりにインターフェイスを使用する場合、クライアントブラウザに送信されるプロダクションコードが少ないという利点もあります。インターフェイスは、プリコンパイル時または呼び出したい場合にのみ存在します。

私のコードが機能し、それがあなたの問題を解決することを願っています。

22
M4R1KU