How to Convert Observable to Array[]

Using HttpClient (Http's replacement) in Angular 4.3+, the entire mapping/casting process is made simpler/eliminated.

Using your CountryData class, you would define a service method like this:

getCountries()  {
  return this.httpClient.get<CountryData[]>(');
}

Then when you need it, define an array like this:

countries:CountryData[] = [];

and subscribe to it like this:

this.countryService.getCountries().subscribe(countries => this.countries = countries);

A complete setup answer is posted here also.

This should work:

GetCountries():Observable<CountryData[]>  {
  return this.http.get(`)
    .map((res:Response) => <CountryData[]>res.json());
}

For this to work you will need to import the following:

import 'rxjs/add/operator/map'

//Component. home.ts :

  contacts:IContacts[];


ionViewDidLoad() {
this.rest.getContacts()
.subscribe( res=> this.contacts= res as IContacts[]) ;

// reorderArray. accepts only Arrays

    Reorder(indexes){
  reorderArray(this.contacts, indexes)
}

// Service . res.ts

getContacts(): Observable<IContacts[]> {
return this.http.get<IContacts[]>(this.apiUrl+"?results=5")

And it works fine

You can convert any observable to an array using lastValueFrom and toArray:

import * as rxjs from 'rxjs'
import * as rxops from 'rxjs/operators'

console.log(await rxjs.lastValueFrom(rxjs.from([1,2,3]).pipe(rxops.toArray())))

prints

[ 1, 2, 3 ]

toArray "collects all source emissions and emits them as an array when the source completes." lastValueFrom just converts the last (well, the only, since toArray scoops up everything) value of the array to a promise.