typescript - Hvordan hente data fra en Observable i Angular

Jeg har en Angular-basert applikasjon som sender en RESTful-forespørsel til en server hvis svar er en JSON-strøm som representerer en liste over objekter av følgende type:

export interface Personal {
  theAddress: string;
  theCity: string;
  theState: String;
  theCountry: string;
  emailAddress: string;
}

Koden i komponenten min bruker en HttpClient GET-forespørsel for å hente data som skal legges inn i en Observable:

people$: Observable<Personal[]>;

...

ngOnInit() {
    this.people$ = this.http
        .get<Personal[]>("/people/get")
        .map(data => _.values(data))
        .do(console.log);
}

Av ulike grunner ønsker jeg å hente innholdet i Observable og legge det inn i en matrise med personer-objekter. Etter å ha lest ulike dokumentasjoner på Internett, er jeg klar over at for å hente dataene som mottas, må jeg på en eller annen måte bruke en subscribe-metode på Observable. Dessverre er det ikke helt klart for meg nøyaktig hvordan jeg skal gjøre dette.

Kan noen hjelpe med dette? Hvordan trekker man ut objektene mottatt av en Observable til en matrise?

Svar #1

Du må abonnere på observable ved å kalle .subscribe på den og sende en callback til subscribe. Inne i denne callbacken vil du motta data fra observable via callback-parametere, og deretter kan du tilordne disse dataene til en lokal variabel. Se koden nedenfor

ngOnInit() {
    this.people$ = this.http
        .get<Personal[]>("/people/get")
        .map(data => _.values(data))
        .do(console.log)
        .subscribe(data => this.someArray = data); // ==> see this line
}

Observable som returneres fra Angular http.get er kalde observables. De blir ikke utført før du abonnerer på dem.

Svar #2

Hvis du trenger verdiene i et array, trenger du ikke at people$ er en observable. Bare gjør dette:

import 'rxjs/add/operator/map';

...

people: Personal[];

...

ngOnInit() {
  // Let's get rid of lodash for the mapping thing
  this.http.get<Map<string, Personal>>('/people/get')
    .map(data => Object.keys(data).map(key => data[key]))
    .subscribe((people: Personal[]) => this.people = people);
}

Forresten ser det ut til at du bruker et utdatert rxjs-bibliotek (før versjon 5.5). Hvis du oppdaterer det, må du bruke rørbare operatorer:

import {map} from 'rxjs/operators';

...
people: Personal[];

...

ngOnInit() {
  // Let's get rid of lodash for the mapping thing
  this.http.get<Map<string, Personal>>('/people/get')
    .pipe(map(data => Object.keys(data).map(key => data[key])))
    .subscribe((people: Personal[]) => this.people = people);
}

Som en ekstra observasjon, siden du bruker en lodash-funksjon for å konvertere objekter til array. Tilsynelatende returnerer ikke this.http.get<Personal[]> egentlig et array av Personal, men et objekt, så du må sannsynligvis skrive get-metoden slik (som jeg gjorde i koden ovenfor):

this.http.get<{[id: string]: Personal}>

eller

this.http.get<Map<string, Personal>>

Relaterte artikler