Extracting information from an Observable in Angular: A comprehensive guide

Question

Extracting information from an Observable in Angular: A comprehensive guide

I am currently working on an Angular application that interacts with a server through RESTful requests, and receives a JSON stream response containing objects of a specific type. The interface for these objects is as follows:

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

Within my component code, I utilize HttpClient to make GET requests in order to populate an Observable:

people$: Observable<Personal[]>;

...

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

I am seeking guidance on how to extract the data from this Observable and convert it into an array of `people` objects. While I have researched methods such as using the subscribe function on Observables, I am still uncertain about the exact implementation.

If anyone can provide assistance on how to effectively extract the received objects from the Observable and store them in an array, I would greatly appreciate it.

angular typescript rest

Answer 1

Answer №1

To start receiving data from the observable, make sure to subscribe to it using .subscribe and provide a callback function. This callback will receive the data from the observable which you can then assign to a local variable. See the example below:

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

The observables returned by Angular's http.get method are cold observables, meaning they won't execute until you subscribe to them.

Answer 2

To start receiving data from the observable, make sure to subscribe to it using .subscribe and provide a callback function. This callback will receive the data from the observable which you can then assign to a local variable. See the example below:

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

The observables returned by Angular's http.get method are cold observables, meaning they won't execute until you subscribe to them.

Answer 3

Answer №2

When transforming values into an array, there is no need for people$ to remain observable. Here's what you can do:

import 'rxjs/add/operator/map';

...

people: Personal[];

...

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

It seems that you are using an outdated version of the rxjs library (prior to version 5.5). If you update it, you will need to use pipeable operators:

import {map} from 'rxjs/operators';

...
people: Personal[];

...

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

Another point to note is that if you are converting objects to arrays using a lodash function, it appears that this.http.get<Personal[]> may not actually be returning an array of Personal, but an object. In that case, you might need to define the get method like this (similar to the code above):

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

or

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

Answer 4

When transforming values into an array, there is no need for people$ to remain observable. Here's what you can do:

import 'rxjs/add/operator/map';

...

people: Personal[];

...

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

It seems that you are using an outdated version of the rxjs library (prior to version 5.5). If you update it, you will need to use pipeable operators:

import {map} from 'rxjs/operators';

...
people: Personal[];

...

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

Another point to note is that if you are converting objects to arrays using a lodash function, it appears that this.http.get<Personal[]> may not actually be returning an array of Personal, but an object. In that case, you might need to define the get method like this (similar to the code above):

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

or

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

Extracting information from an Observable in Angular: A comprehensive guide

Answer №1

Answer №2

Similar questions

Retrieving a variable value set within a jQuery function from within an Angular 2 component

The video element in my Angular application is not functioning properly in Safari

Angular Material datepicker designed for multiple input fields

Efficiently loading Ionic 3 components within a tab with lazy-loading functionality

Is it possible to showcase a unique date for every item that gets added to a list?

Angular Firestore extracting and transforming data

When incorporating Papaparse with Angular 2, encountering the issue "Identifier 'Papa' is not found" may arise

What is the most effective way to structure a React function incorporating nested objects and mapping?

Using TypeScript: creating functions without defining an interface

Learn how to implement icons within Textfield components using Material-UI and TypeScript in React

What steps can be taken to address the InvalidPipeArgument error when working with dates?

I possess a dataset and desire to correlate each element to different elements

Angular: Converting the outcome of a request to an observable

There is an issue with the hook call while trying to establish a context with a reducer

What is causing the error 'router-outlet' to be unrecognized in Angular version 17?

Facing a Timeout Issue while Testing an Angular application using Protractor

Angular2- Techniques for exchanging data between isolated components

A pronounced distinction exists between ionInput and ionChange functionality

How can one determine if a background image has successfully loaded in an Angular application?

The Strapi plugin seems to be encountering an issue as the API is not reachable, leading to a