apiリクエストを結合する

Question

私はAngular2が初めてで、Httpリクエストとオブザーバブルを使い始めました。 以前は.NETとMySqlで作業していましたが、現在はAPIのデータを扱うベストプラクティスを学びたいと考えています。

私はテーブルを結合するために使用されています.Jsonデータを結合する最適な方法を探したいと思います。 この例では、ユーザーがフォームに記入して電話番号を入力します。

電話番号のプレフィックスは、国コードと接頭辞がf.exのドロップダウンリストです。ドイツ+49 そのため私は、オブジェクトが必要です：{「ドイツ」：」49” 、カンボジア： "855" ...}

私はcountry.ioする2 httpリクエストを行います。これらのことから

http://country.io/phone.json // e.g. DE: “Germany” 
    http://country.io/names.json // e.g. DE: “49” 

2リクエスト私は新しいjsonオブジェクトを作成するために以下のコードを使用しました：myPhonePrefixObject

私はコードが長すぎると思っており、より良い方法でそれを行うことができるはずです。

国-service.ts：

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/Rx'; 
import { Observable } from 'rxjs/Observable'; 

@Injectable() 
export class CountryService { 

    constructor( private _http:Http) { } 

    getCountryCode(): Observable<any> {  
     return this._http.get('http://crossorigin.me/http://country.io/phone.json') 
      .map(countryCodes => countryCodes.json()); 
    } 

    getPhonePrefix(): Observable<any> {  
     return this._http.get('http://crossorigin.me/http://country.io/names.json') 
      .map(phonePrefix => phonePrefix.json()); 
    }  

} 

コードuserform.component内部の私はここにもCountryService

myPhonePrefixObject; 

this.countryPhonePrefix() 
    .then((pp) => { 
     myPhonePrefixObject = pp; 
    }) 
    .catch((err) => { 
     console.log(err); 
    }); 


private getCountryCode() { 
return new Promise((resolve) => { 
    this._countryService.getCountryCode() 
     .subscribe(
      res => resolve(res) 
     ); 
});  
} 


private getPhonePrefix() { 
return new Promise((resolve, reject) => { 
    return this._countryService.getPhonePrefix() 
     .subscribe(
      res => resolve(res), 
      error => reject(error) 
     ); 
});     
} 


private countryPhonePrefix() { 
return new Promise((resolve, reject) => { 
    let cc: Object; 
    this.getCountryCode() 
     .then((cCode) => { 
      cc = cCode; 
      return this.getPhonePrefix() 
     }) 
     .then((pPrefix) => { 
      let pp: Object = {}; 
      Object.keys(cc).forEach((key, index) => { 
       pp[cc[key]] = pPrefix[key]; 
      });    
      resolve(pp); 
     }) 
     .catch((err) => { 
      reject(err); 
     }); 
});  
} 

Answer 1

.NET開発者をインポートする場所で！

複数のストリームを処理するには、集約メソッドが必要です。この場合、2つのストリーム（HTTP要求）の結果に基づいてオブジェクトを生成する場合、探している集約メソッドはcombineLatestです。これは、2つのストリームを組み合わせて、あなたは2つのソースに基づいて出力データを定義してみましょう：

getCombinedData(): Observable<Data> { 
    return this.getCountryPhones().combineLatest(this.getCountryNames(), 
    (phoneData, nameData) => { 
     var resultData = {}; 
     Object.keys(nameData).forEach((key) => { 
     resultData[nameData[key]] = phoneData[key]; 
     }); 

     return resultData; 
    }); 
} 

Plunkerを：http://plnkr.co/edit/agUPNujG3NnbKI6J3ZVJ?p=preview