To utilize RxJS 6+, the 'Observable' type needs to include a 'Symbol.iterator' function that generates an iterator

Question

To utilize RxJS 6+, the 'Observable' type needs to include a 'Symbol.iterator' function that generates an iterator

I encountered an issue when attempting to filter an array of values from an observable:

The error message I received was: 'Type 'Observable' must have a 'Symbol.iterator' method that returns an iterator'

Here is the code snippet:

export class ItemsService {

  orderItems: OrderItem[] = [];
  orderItemsUrl = 'http://localhost:5000/order-items/';

  getOrderItemsFromHttp(selectedOrderNumber): Observable<OrderItem[]> {
    const tempArr = [];
      const orderItems = of (this.http.get<OrderItem[]>(`${this.orderItemsUrl}`)
      .subscribe(res => {
            this.orderItems = res;
      }) );

    for (const orderItem of orderItems) {                        <--- The error occurs here
        if (orderItem.orderNumber === selectedOrderNumber) {
          tempArr.push(orderItem);
        }
    }
    return of(tempArr);
  }  
}

By changing the following:

for (const orderItem of orderItems) {

to

for (const orderItem of [orderItems]) {

The error disappears, but the property orderNumber is no longer recognized. IntelliSense then displays:

Property 'orderNumber' does not exist on type 'Subscription'

What is the best way to fix this issue?

angular typescript rxjs

Answer 1

Answer №1

It appears that the solution you are seeking is as follows:

  retrieveOrderItemsFromServer(orderNumber): Observable<OrderItem[]> {
    return this.http.get<OrderItem[]>(`${this.orderItemsEndpoint}`).pipe(
      map(orderItems => orderItems.filter(item => item.orderNuber === orderNumber))
    );
  }

In order for this code to function properly, ensure you have imported the map operator:

import { map } from 'rxjs/operators';

Answer 2

It appears that the solution you are seeking is as follows:

  retrieveOrderItemsFromServer(orderNumber): Observable<OrderItem[]> {
    return this.http.get<OrderItem[]>(`${this.orderItemsEndpoint}`).pipe(
      map(orderItems => orderItems.filter(item => item.orderNuber === orderNumber))
    );
  }

In order for this code to function properly, ensure you have imported the map operator:

import { map } from 'rxjs/operators';

Answer 3

Answer №2

To maintain flexibility in your codebase, I suggest decoupling your connection method from your business logic retrieval. This way, transitioning from using HTTP to SignalR, for instance, won't require changing your core logic.

You can achieve this by creating a separate service dedicated to handling HTTP requests for data retrieval. Your ItemsService can then utilize this service to fetch the necessary data.

There's no need to reconstruct the array unnecessarily.

@Injectable ({
   providedIn: 'root'
})
export class RestService {
config: Config; // Define your URLs
   getItems () {
     return this.http.get <OrderItem []> (this.config.itemURL, {note: 'response'});
   }
}

@Injectable ()
export class ItemsService {

  orderItems: OrderItem [];

constructor (private restService: RestService) {
}

getItems () {
   return new Observable ((observer) => {
    restService.getItems (). subscribe ((items) => {
      observer.next (items);
    });
  });
}

}

Answer 4

To maintain flexibility in your codebase, I suggest decoupling your connection method from your business logic retrieval. This way, transitioning from using HTTP to SignalR, for instance, won't require changing your core logic.

You can achieve this by creating a separate service dedicated to handling HTTP requests for data retrieval. Your ItemsService can then utilize this service to fetch the necessary data.

There's no need to reconstruct the array unnecessarily.

@Injectable ({
   providedIn: 'root'
})
export class RestService {
config: Config; // Define your URLs
   getItems () {
     return this.http.get <OrderItem []> (this.config.itemURL, {note: 'response'});
   }
}

@Injectable ()
export class ItemsService {

  orderItems: OrderItem [];

constructor (private restService: RestService) {
}

getItems () {
   return new Observable ((observer) => {
    restService.getItems (). subscribe ((items) => {
      observer.next (items);
    });
  });
}

}

To utilize RxJS 6+, the 'Observable' type needs to include a 'Symbol.iterator' function that generates an iterator

Answer №1

Answer №2

Similar questions

Having difficulty uploading a file using a formGroup

What could be causing the "Failed to compile" error to occur following the execution of npm

Setting up ESLint for TypeScript with JSX configuration

Cross-origin resource sharing (CORS): In PHP, the response to the preflight request is not successfully passing. I am permitting

Utilizing a Material UI custom theme in React with Typescript: A step-by-step guide

How to avoid property name conflicts when extending interfaces in Typescript

TypeScript overlooking mismatched type arguments in generics

A colleague's dependency is taking precedence over an NX Library

When I remove a datarow from my database, it continues to appear on my webpage until I manually refresh it. Is there a way to ensure that the row is instantly deleted from my table

Ways to programmatically include routes with components sourced from a dynamically loaded module

Is there a way to determine the present date within a template?

Angular - Is there a specific type for the @HostListener event that listens for scrolling on the window?

Incorporate a module that was developed locally into your project

Refresh the Angular2 API at regular intervals to monitor any updates in the response

Angular Universal: Troubleshooting an Unrendered Route

Angular 2: The linting error shows up as "Anticipated operands need to be of the same type or any"

Assign the onClick function to the decoration of a Vscode extension

Injecting a service into another service in Angular2: A comprehensive guide

Typescript's spellbinding courses

What is the best way to transform my tuple so that it can be properly formatted for JSON in Python?