How to convert Observable to array[]

Question

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

You need to subscribe to the Observable: `this.CountryService.GetCountries().subscribe(result => this.myGridOptions.rowData = result);` — martin, Jul 06 '17 at 05:58
Can you check this json services.groupkt.com/country/get/all how to convert my CountryData[] — Ragavan, Jul 06 '17 at 11:46

score 59 · Accepted Answer · answered Jul 06 '17 at 05:59

59

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.

answered Jul 06 '17 at 05:59

CozyAzure

8,280
7
34
52

this.myGridOptions.rowData undefined . not binding data to grid – Ragavan Jul 06 '17 at 11:41
Can you check this json http://services.groupkt.com/country/get/all how to convert my CountryData[] – Ragavan Jul 06 '17 at 11:45
@Ragavan did you initialize your `this.myGridOptions.rowData` in your constructor? – CozyAzure Jul 06 '17 at 15:41
Yes i'm initialized in constructor – Ragavan Jul 07 '17 at 04:52
@Ragavan You need to find out why your `this.myGridOptions.rowData` is undefined man. Use console to do the debugging – CozyAzure Jul 07 '17 at 05:02
any issue with josn data ? If you have sample for your answer please give me a link . i will refer – Ragavan Jul 07 '17 at 05:13

mohsenmadi · Answer 2 · 2018-02-13T01:32:41.860

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.

score 2 · Answer 3 · edited Oct 16 '18 at 15:34

2

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'

edited Oct 16 '18 at 15:34

Vic Seedoubleyew

9,888
6
55
76

answered Jul 07 '17 at 04:26

Michael Kang

52,003
16
103
135

i'm getting below error severity: 'Error' message: 'Type 'Observable' is not assignable to type 'Observable'. Type 'CountryData' is not assignable to type 'CountryData[]'. Property 'length' is missing in type 'CountryData'.' at: '90,3' source: 'ts' – Ragavan Jul 07 '17 at 04:52

score 1 · Answer 4 · edited Jun 01 '18 at 09:25

//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

score 0 · Answer 5 · answered Apr 21 '22 at 20:51

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.

I'm curious about the wildcard imports. Will those be optimized by the compiler to remove unused items? — B2K, May 24 '23 at 14:45

How to convert Observable to array[]

5 Answers5

Linked

Related