Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to convert Observable<any> to array[]

I have following method in typescript, I need to bind to angular grid

CountryService

GetCountries()  {
  return this.http.get(`http://services.groupkt.com/country/get/all`)
    .map((res:Response) => <CountryData[]>res.json().RestResponse["result"]);
}

GridComponent

  template: `
        <ag-grid-ng2 style="width: 100%" #agGrid class="ag-material"
                    rowHeight="50"
                    [gridOptions]="myGridOptions" 
                     >
            </ag-grid-ng2>
        `,

  this.myGridOptions.rowData= this.CountryService.GetCountries();

CountryData

export class CountryData{
  name: string;
  alpha2_code: string;
  alpha3_code: string;
}

But GetCoutries will return Observable of any, unable to bind to rowData?

How to convert Observable to CountryData[] in typescript ?

you find JSON data here: http://services.groupkt.com/country/get/all

like image 355
Ragavan Avatar asked Jul 06 '17 05:07

Ragavan


People also ask

Can we convert observable into Promise?

How to Convert an Observable to a Promise in Angular? Since the get method of HttpClient returns an observable, we use the toPromise() method to convert the observable to a promise. Since you can convert an observable to a promise, you can make use of the async/await syntax in your Angular code.

What is observable angular12?

Angular / By ngodup. Rxjs Observable is the most basic building block of RxJS that represents an event emitter, which will emit any data received over time. Angular Observable object definition will not cause a networking event to be fired unless it will not subscribe or listen, as observables are lazy in nature.


3 Answers

You will need to subscribe to your observables:

this.CountryService.GetCountries()
    .subscribe(countries => {
        this.myGridOptions.rowData = countries as CountryData[]
    })

And, in your html, wherever needed, you can pass the async pipe to it.

like image 77
CozyAzure Avatar answered Oct 18 '22 00:10

CozyAzure


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[]>('http://theUrl.com/all');
}

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.

like image 38
mohsenmadi Avatar answered Oct 18 '22 01:10

mohsenmadi


This should work:

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

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

import 'rxjs/add/operator/map'
like image 2
pixelbits Avatar answered Oct 17 '22 23:10

pixelbits