Exploring the Functionality of Observables and HTTP Requests in Angular

Question

Exploring the Functionality of Observables and HTTP Requests in Angular

When I use the http get method in Angular, it returns an observable. To test this, I created a local server that serves up a 50 MB JSON file containing all employee data.

import { Injectable } from "@angular/core";
import { Http } from "@angular/http";
import 'rxjs/add/operator/map';
@Injectable()
export class DataServiceService {
  constructor(private _http: Http) {}

  getEmployeeData() {
    return this._http
      .get("http://localhost:3000/employees")
      .map(response => response.json());
  }
}

App.Component.html

{{employeeData$ | async}}

Observable is said to be a stream of data that can change over time. I expected the data to start showing as soon as it begins streaming the employees, but in this case, my page remains blank for 30 seconds before all the employee data suddenly appears.

So, what's the advantage of using an observable? Couldn't I just load all the data into a local array and then display it on the HTML?

Is there a way to make the data display as soon as it receives the first employee, instead of making the user wait for 30 seconds?

I realize that in a real application, I should only fetch the number of employees that can be seen in the browser's view, and then load the next set of employees.

angular typescript rxjs observable

Answer 1

Answer №1

In the world of Angular, the HTTP Observable operates by yielding only when the entire stream is complete - in other words, when all the data has been successfully transferred. This means it will only yield once, providing a single value.

It seems that the issue with the BE (Back-end) is not too severe, as the 30-second delay could be attributed to the sheer size of the JSON being processed. The serialization and deserialization of such a large file can consume a significant amount of time, especially when coupled with downloading 50 Megs over the network.

One potential solution is to create a custom "progressive" HTTP call that can return a stream of employees every time a new chunk of data is received. This can be achieved using low-level XMLHttpRequest or by exploring libraries that offer this functionality.

Attempting to parse an incomplete JSON in order to retrieve "the data received so far" is not advisable. In such cases, it may be worth considering multiple HTTP requests with pagination, allowing you to fetch the necessary employees in batches.

Here's an example code snippet that illustrates this approach:

function getEmployeeStream():Rx.Observable<Employee[]> {
    return Rx.Observable.interval(100)
        .concatMap(
            i => getEmployees(i)
        )
        .takeUntil(
            employees => employees.length === 0
        )
        .scan(
            (allEmployees, receivedEmployees) => allEmployees.concat(receivedEmployees),
            []
        );
}

function getEmployees(page:number):Rx.Observable<Employee[]> {
    return this.http(...)
        .map(data => parseEmployees(data));
}

This code snippet generates a new event every 100ms, converts each event into a paginated call to the server, continues fetching employees as long as data is received, and combines them into a single array for use with the async pipe.

If you need to speed up the data retrieval process by making concurrent calls, you can replace concatMap with mergeMap and adjust the concurrent parameter accordingly. However, you may need to address the issue of incomplete calls being discarded due to the termination condition employees.length === 0. One workaround could be using takeUntil to wait for a set number of empty employee responses corresponding to the maximum allowable concurrent calls, ensuring completion of all pending responses.

Answer 2

In the world of Angular, the HTTP Observable operates by yielding only when the entire stream is complete - in other words, when all the data has been successfully transferred. This means it will only yield once, providing a single value.

It seems that the issue with the BE (Back-end) is not too severe, as the 30-second delay could be attributed to the sheer size of the JSON being processed. The serialization and deserialization of such a large file can consume a significant amount of time, especially when coupled with downloading 50 Megs over the network.

One potential solution is to create a custom "progressive" HTTP call that can return a stream of employees every time a new chunk of data is received. This can be achieved using low-level XMLHttpRequest or by exploring libraries that offer this functionality.

Attempting to parse an incomplete JSON in order to retrieve "the data received so far" is not advisable. In such cases, it may be worth considering multiple HTTP requests with pagination, allowing you to fetch the necessary employees in batches.

Here's an example code snippet that illustrates this approach:

function getEmployeeStream():Rx.Observable<Employee[]> {
    return Rx.Observable.interval(100)
        .concatMap(
            i => getEmployees(i)
        )
        .takeUntil(
            employees => employees.length === 0
        )
        .scan(
            (allEmployees, receivedEmployees) => allEmployees.concat(receivedEmployees),
            []
        );
}

function getEmployees(page:number):Rx.Observable<Employee[]> {
    return this.http(...)
        .map(data => parseEmployees(data));
}

This code snippet generates a new event every 100ms, converts each event into a paginated call to the server, continues fetching employees as long as data is received, and combines them into a single array for use with the async pipe.

If you need to speed up the data retrieval process by making concurrent calls, you can replace concatMap with mergeMap and adjust the concurrent parameter accordingly. However, you may need to address the issue of incomplete calls being discarded due to the termination condition employees.length === 0. One workaround could be using takeUntil to wait for a set number of empty employee responses corresponding to the maximum allowable concurrent calls, ensuring completion of all pending responses.

Exploring the Functionality of Observables and HTTP Requests in Angular

Answer №1

Similar questions

What is the best way to access data from a local JSON file in Gatsby when using TypeScript and GraphQL?

Unable to render ASP.NET Core 2 WebAPI and Angular application on the webpage

Angular 2 Dropdown Multiselect Plugin - Fully Customize Width to 100%

Creating a key-constrained type in Typescript for object literals with automatically deduced number values

Angular 5 Material Datepicker: A Sleek and Efficient Way to

Adding a separator for thousands on data labels in ng2-charts

Using Next.js, it is not possible to use absolute imports within SASS

Can Schema and Model/Entity Files be Decoupled in TypeORM?

Angular 2 and beyond: delivering a unified global service instance for sub-modules

Eliminate duplicate dropdown options in Angular 2 using a filter function

Error Message: "Unable to access property 'proposta_usuario' of undefined in Angular 2 Data Binding"

Exploring the application of styles within the shadow DOM

Swapping elements with drag and drop in Angular 7

"Here's how you can mark an option as selected in Angular, either from the component or the HTML file

The specified 'contactId' property cannot be found within the data type of 'any[]'

Navigating product search in your Ionic Ecommerce App

Angular selects the initial three arrays out of an array

Converting a stringified array object to an object using Expressjs

Struggling to Enforce Restricted Imports in TypeScript Project Even After Setting baseUrl and resolve Configuration

Tips for refreshing the 'state' of an Angular Router component