javascript - How to implement search functionality on table?

Question

This is my first time working with Angular and im trying to implement a search functionality for my table in my Angular-app. I followed this tutorial to do so but am having some issues.
app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SearchPipe } from './search.pipe';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { MatTableModule } from '@angular/material/table';
import { MatMenuModule } from '@angular/material/menu';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MsalModule, MsalAngularConfiguration, MsalInterceptor, MSAL_CONFIG_ANGULAR, MsalService, MSAL_CONFIG } from '@azure/msal-angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Configuration } from 'msal';

import { environment } from './../environments/environment';

//function MSALConfigFactory(): Configuration {
//  return {
//    auth: {
//      clientId: environment.clientId,
//      authority: `https://login.microsoftonline.com/${environment.teantId}`,
//    },
//  };
//}

//function MSALAngularConfigFactory(): MsalAngularConfiguration {
//  return {
//    consentScopes: [
//      'user.read',
//    ],
//    // Azure Functions does not work with AAD v2 Token, see
//    // https://docs.microsoft.com/en-us/azure/app-service/overview-authentication-authorization and
//    // https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/FAQs#q1-adal-vs-msal
//    protectedResourceMap: [[environment.apiUrl, [`${environment.clientId}/.default`]]],
//  };
//}

@NgModule({
  declarations: [
    AppComponent,
    SearchPipe
  ],
  imports: [
    AppRoutingModule,
    BrowserAnimationsModule,
    BrowserModule,
    FormsModule,
    HttpClientModule,
    MatIconModule,
    MatMenuModule,
    MatPaginatorModule,
    MatTableModule,
    MatProgressSpinnerModule,
    MsalModule
  ],
  providers: [],
  //  {
  //    provide: HTTP_INTERCEPTORS,
  //    useClass: MsalInterceptor,
  //    multi: true
  //  },
  //  {
  //    //provide: MSAL_CONFIG,
  //    //useFactory: MSALConfigFactory
  //  },
  //  {
  //    provide: MSAL_CONFIG_ANGULAR,
  //    useFactory: MSALAngularConfigFactory
  //  },
  //  MsalService
  //],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-component.ts:

import { Component, Injectable, OnInit, Pipe, PipeTransform } from '@angular/core';
import { environment } from './../environments/environment';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html"
})

export class AppComponent implements OnInit {

  baseURL: string = "http://localhost...";

  public searchInput!: string;

  blobData: any[] = [];

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.getBlobData();
  }

  public getBlobData() {
    return this.http.get<any[]>(this.baseURL).toPromise()
  }
}

app.component.html:

<div class="container">
  <div id="header">
    <h1 id="title">title</h1>
    <div id="search-container">
      <input name="searchInput" [(ngModel)]="searchInput" id="searchbar" type="text" placeholder="Search.." class="form-control">
      <button id="search-button"><mat-icon id="search-icon">search</mat-icon></button>
    </div>
  </div>
  <!--<router-outlet></router-outlet>-->

    <div class="form-group">
      <table class="mat-elevation-z8" id="dataTable" mdbTable>
        <th id="name"> Name </th>
        <th id="createdOn"> Created On </th>
        <tr *ngFor="let data of blobData | search: searchInput">
          <td>{{ data.name }}</td>
          <td>{{ data.createdOn | date }}</td>
        </tr>
      </table>
    </div>

  <div id="footer-container">
    <footer id="footer">
      <img src="/assets/img/image.png" alt="image.png" id="logo" />
    </footer>
  </div>
</div>

I created another file for the search-pipe - search.pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {
  transform(name: string[], searchInput: string): any[] {
    if (!searchInput) {
      return [];
    }
    searchInput = searchInput.toLowerCase();
    return name.filter(
      x => x.toLowerCase().includes(searchInput)
    )
  }
}

The problem is that whenever I open the page on localhost the table-rows are not there anymore.
I noticed that whenever I delete the | search: searchInput in the html-file the rows appear again, so it has to have something to do with that. However, I can't figure out how to solve this issue.

Thank you!

question from:https://stackoverflow.com/questions/65847274/how-to-implement-search-functionality-on-table

Answer 1

I am not sure if you might need to change the pipe as such:

return name.filter( x => {
 return x.toLowerCase().includes(searchInput)
    }
)

because sometimes putting in a new line will require a return statement. In any case, it makes sense for you to check if the filter itself works.

searchInput = searchInput.toLowerCase();
const test =  name.filter(
      x => x.toLowerCase().includes(searchInput)
    )
console.log(test)