角度2 - サーバーからクライアントに返されたJSONキー値の一部を表示します。

Question

サーバーからすべての製品詳細を返すサービスがあります。今では、製品の詳細を絞り込み、必要なキー値だけを表示する別の機能が必要になります。私がしたことは、product_Subsetという新しいインターフェースが作成され、必要なキー値が入力されました。そう

export interface IProduct_ExportCSV { 
    name: string; 
    cspeed:string; 
    maxlp:string; 
    position:string; 
    xposition:string; 
    yposition:string; 
} 

その後、私のサービスクラスで、私はこの新しい関数を作成

​​

しかし、これは代わりに、フィルタリングのサーバからのすべての製品の値を返すと私は述べただけで、キーの値を示しているようインタフェース。そして、コンポーネントクラスに私は誰かが正しい道に私を導いてくださいすることができ、製品サービス

private extractData(response: Response) { 
     let body = response.json(); 
     return body || {}; 
    } 

で

onExportCVS() 
     { 
     this.productDataService.getProducts_ExportCSV().subscribe((product_dataCSV: 
     IProduct_ExportCSV[]) =>{ 
      this.productCSV = product_dataCSV; 
      console.log("Export to cvs!!! "+JSON.stringify(this.productCSV)); 
     }), 
     (err:any) => console.log(err), 
     () => console.log('getProductsssss() retrieved products'); 

そうのようなsubcribe、そして、私の抽出メソッドを呼び出します。 ありがとうございます！

Answer 1

extractDataメソッドで必要なフィールドをマップする必要があります。

private extractData(response: Response) { 
    let body = response.json(); 

    return body.map((product) => { 
     return { 
      name: product.name, 
      cspeed: product.cspeed, 
      maxlp: product.maxlp, 
      position: product.position, 
      xposition: product.xposition, 
      yposition: product.yposition 
      } 
    }); 

} 

方法はIProduct_ExportCSVの戻り値の型を持っていることを宣言[]自動的にあなたのために必要なフィールドをマップしません - それはちょうどあなたが正しい値を返すされていることを確認するのに役立ちます。

observableがIProduct_ExportCSV型の配列を返すと宣言しましたが、extractData関数が単一のオブジェクトを返しています - 上記のバージョンでは、実際には型宣言の状態として配列であると仮定しています。

自動的にオブジェクト型に返されたJSONをマッピングするための簡単な方法を探しているなら、あなたもあなたの質問にextractDataメソッドを追加した場合https://github.com/mobxjs/serializr