Объединение запроса api

Question

Я новичок в Angular2 и только начал работать с Http-запросом и наблюдаемыми. Раньше я работал с .NET и MySql, и теперь я пытаюсь изучить лучшую практику работы с данными из API.

Я привык к столам, и я хотел бы найти лучший способ объединить данные json. В этом примере я хочу, чтобы пользователь заполнил форму и набрал свой номер телефона.

Префикс номера телефона является выпадающим списком с кодом страны и префиксом f.ex. Германия +49 Therefor Мне нужен объект: { «Германия»:»49” , Камбоджа: "855" ....}

я сделать запрос 2 НТТР country.io:

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