Combining Filter Subject with RxJS for Text Filtering in Angular Material Table with HTTP Results

I'm attempting to implement the example of Angular Material Text Filtering by using the data obtained from an http get request.

export class MyDtoDataSource extends DataSource<IMyDto> {
      private _filterChange = new BehaviorSubject('');
      public get filter(): string { return this._filterChange.value; }
      public set filter(filter: string) { this._filterChange.next(filter); }

      constructor(private _apiService: ApiService) {
          super()
      }

      connect(): Observable<IMyDto[]> {

          const displayDataChanges = [
              this._apiService.getMyDtos(),
              this._filterChange,
          ];

          return Observable
          .merge(...displayDataChanges)
          .map((dtos: IMyDto[]) => dtos.filter(dto => dto.categories.map(i => i.name).includes(this.filter)));
      }

  disconnect() {
  }
}

However, it seems like there might be an issue with my mapping function since I am encountering the runtime error dtos.filter is not a function

Answer №1

A big thanks to @cartant for guiding me in the right direction.

fetchData(): Observable<IMyDto[]> { 
    return Observable
      .combineLatest(this._apiService.getMyDtos(), this._filterChange)
      .map(([dtos, filter]) => dtos.filter(dto => dto.categories.map(i => i.name).includes(filter)));
 }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can Angular reactive forms be used to validate based on external conditions?

Currently, I am exploring Angular reactive forms validation and facing an issue with implementing Google autocomplete in an input field: <input autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="input-auto input" formControlName ...

The absence of typings.json in Typescript is creating an issue

As of now, I am encountering the following error during compilation: typings.json is missing In my existing packages.json, I have included the following dependency: "devDependencies": { "typescript": "^2.6.1", ... } Do you have any suggestion ...

Retrieving the necessary data from my object to perform a sum calculation in angular

Having trouble retrieving an attribute from an array in my code. In my .ts file, I am fetching data from my backend endpoint like this: export class PostFeedComponent implements OnInit { data: any = {}; constructor(private http: HttpClient) { t ...

Creating a Typescript HttpInterceptor and ensuring its compatibility with minification techniques

Currently, I am trying to implement an Angular HttpInterceptor based on the solution provided in this Stack Overflow response: However, I am struggling with the factory method: public static Factory($q: ng.IQService) { return new AuthenticationInter ...

Do you need to redeclare the type when using an interface with useState in React?

Take a look at this snippet: IAppStateProps.ts: import {INoteProps} from "./INoteProps"; export interface IAppStateProps { notesData: INoteProps[]; } and then implement it here: useAppState.ts: import {INoteProps} from "./interfaces/INo ...

What is the process for integrating Typescript into a Quasar 2 project that is utilizing Vite as its build tool?

The Quasar 2 documentation provides in-depth guidance on integrating Typescript with Webpack: Unfortunately, my Quasar project is configured with Vite and I am struggling to locate resources on incorporating Typescript into an already existing project. A ...

Can you point me to the location where the 'req' parameter is specified?

I've been exploring a new authentication approach detailed in this article. One issue I'm encountering is locating where the req parameter is declared in the snippet below. It seems like my code won't compile because this parameter isn&apos ...

Setting a global property within the complete method of an ngrx Angular subscriber is a helpful technique to ensure that

Currently, I have a global property called loadingIndicatorsearchVisible = false;. In addition, there is a method containing an observable, where I manipulate the loadingIndicatorsearchVisible to display or hide a loading panel. search(){ this.loadingI ...

Join and Navigate in Angular 2

Attempting to retrieve information from a JSON file has been an issue for me. Here is the code snippet: ngOnInit() { this.http.get('assets/json/buildings.json', { responseType: 'text'}) .map(response => response) .subsc ...

What is the best way to incorporate Ekko Lightbox into an Angular 7 Project?

I'm facing an issue while implementing Ekko lightbox in my angular project. Specifically, I want to use it in a certain component but I am unsure about how to import the necessary files into that component. After installing Ekko via NPM, I found all ...

Steps for incorporating jQuery files into Angular 4

As a beginner in Angular 4, I am faced with the challenge of calling a jQuery function using an HTML tag from a method. The jQuery method is located in a separate file. How can I incorporate this into my Angular project? Here's an example: sample() { ...

Experiencing difficulty in transferring array information from a parent component to a child component within an

I'm currently working on a task where I need to pass data from a parent component to a child component. The data consists of an array that is nested within another array. parent.component.html <div *ngFor="let parent of parentArray; index as ...

Can Angular Universal SSR be activated specifically for Googlebot User Agents?

I am aiming to activate Angular Universal SSR only when the User Agent is identified as Googlebot. However, I am uncertain about how to instruct Angular Universal SSR to deliver server side rendered HTML exclusively if the User Agent is Googlebot. server ...

Unable to exclude specific files using VSCode's "files.exclude" feature

In my workspace settings file, the configuration for excluding certain files is as follows: { "files.exclude": { "**/*.js": { "when": "$(basename).ts" }, "app/**/*.js.map": { "when": "$(basename).ts" ...

Formik Fields with unique key properties

When mapping text fields, I follow this structure: { AddVehicleFields.map(({formikRef, ...input}) => ( <> <TextField key={formikRef} helperText={ getIn(formik.touched, formikRef) ? getIn(formik. ...

Combining subclasses in TypeScript

Do you need help with a tricky situation? ...

Creating an interface that features a function capable of accepting its own type and interacting with other interface implementations

interface I { test: (a: I) => boolean; } class Test implements I { //constructor (public additional: number) {} test (a: Test) { return false; } } The code is functioning, however, when we remove the comment from the constructor line, it stops ...

What are the steps to implement templates in Angular 2?

I've been experimenting with templates in Angular2, but I'm not getting the expected results. Here's what I've tried so far. Does anyone have any suggestions or perhaps a different approach I could take? To begin with, I'm using t ...

Setting up a variable with a changing value

In a very specific scenario, the body of type varies based on the length_type attribute (as illustrated in the example). enum LengthTypeEnum { SELECT = 'SELECT', STATIC = 'STATIC', CONDITION = 'CONDITION', PERIOD = ...

The data is not being displayed in the table

I am encountering an issue while attempting to populate the table with data received through props by looping over it. Unfortunately, the data is not rendering on the UI :( However, when I manually input data, it does show up. Below is my code: Code for P ...