Merging two observerable

Question

Technology used - Angular 4,rxjs Trying to achieve - get the data from two different servers(json response),merge the data and show in the list by binding the list with observable array.

**Search component TS** 

    @Component({
      selector: 'word-search',
      templateUrl: 'wordSearch.component.html',
     })
    export class WordSearchComponent {
      term = new FormControl();
      items: Observable<Array<string>>;

      constructor(private wikipediaService: WikipediaService) { }
      ngOnInit() {
        this.items = this.term.valueChanges
          .debounceTime(1000)
          .distinctUntilChanged()
          .switchMap(term => this.wikipediaService.search(term));

        }  
    }

*****Search component chtml***** 

    <div>
        <h2>Search</h2>
        <input type="text" [formControl]="term"/>
        <ul>
      <li *ngFor="let item of items|async ">{{item}}</li>

        </ul>
      </div>

Service code - Problem is here

getWikipediaObserver(term:string):Observable<any>
  {
    var wikipediaUrl = 'http://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK';

      var search = new URLSearchParams()
      search.set('action', 'opensearch');
      search.set('search', term);
      search.set('format', 'json');

      return this.jsonp
        .get(wikipediaUrl, { search })
        .map((request) => request.json()[1]).catch(this.handleError);


  }
  getItuneObserver(term: string)
  {
    var secondUrl = 'https://itunes.apple.com/search?callback=JSONP_CALLBACK&limit=20';
    var search = new URLSearchParams()
    search.set('term', term);
    search.set('format', 'json');


    var ituneObserver = this.jsonp
      .request(secondUrl, { search })
      .map((request) => request.json().results.map(item => {
        return item.trackName + " " +item.collectionCensoredName+" " +item.artistName;
      })).catch(this.handleError); 

      return ituneObserver;
  }

  search(term: string): Observable<any> {
   var observer1= this.getItuneObserver(term);
   var observer2= this.getWikipediaObserver(term);
   return merge(observer1,observer2); ***//PROBLEM***

  }

merge operator emit values twice , once for the first observer and then for the second observer. List will first show the first set and overwrite the older items with the new items. I want merge to emit all the data only once.Any Idea?

Answer 1

You can join multiple observable using forkJoin method which is rxjs library

 // import { forkJoin } from 'rxjs/observable/forkJoin';

 forkJoin(
  this.this.getItuneObserver(term),
  this.getWikipediaObserver(term)
)
.subscribe(([res1, res2]) => {
  this.propOne = res1;
  this.propTwo = res2;
});

Answer 2

Thanks Pramod Patil . How I solved

  search(term: string) {

    const combined =forkJoin(
     this.getItuneObserver(term),
    this.getWikipediaObserver(term)
  );

  return combined;


  }

Subscribed in the component.ts

    import { of } from 'rxjs/observable/of';
   export class WordSearchComponent {
          term = new FormControl();

         items: Observable<Array<string>>;
          result: string[] = [];
          ngOnInit() {

            var combined=this.term.valueChanges
              .debounceTime(1000)
              .distinctUntilChanged()
              .switchMap(term => this.wikipediaService.search(term));

              combined.subscribe(latestValues => {
               const [ response1 , response2 ] = latestValues;
               this.result=this.result.concat(response1);
               this.result=this.result.concat(response2);
               this.items = of(this.result);
           });
}