Angular table sorting, without Angular Material

Question

I want to search in my table but I want the table to be filled with my data to start with. Currently, it will only be filled once I start typing in the search bar.

I think the problem is coming from that the productsArray is empty when the component is initialized

My data is coming from a JSON file in the project.

Below you can see what I currently have

export class TableComponent implements OnInit {
      searchText: any;
      productsArray: Products[] = [];
      filteredArray = [...this.productsArray];

      constructor(private http: HttpClient) {}

      ngOnInit(): void {
        this.getProducts().subscribe((res) => {
          this.productsArray = res;
        });
      }
      getProducts(): Observable < Products[] > {
        return this.http
          .get < any > ('assets/mock.data.json')
          .pipe(map((results) => results.data));
      }
      filterArray(): any {
        if (!this.productsArray.length) {
          this.filteredArray = [];
          return;
        }

        if (!this.searchText) {
          this.filteredArray = [...this.productsArray];
          return;
        }

        const products = [...this.productsArray];
        const properties = Object.keys(products[0]);

        this.filteredArray = products.filter((product) => {
          return properties.find((property) => {
              const valueString = product[property].toString().toLowerCase();
              return valueString.includes(this.searchText.toLowerCase());
            }) ?
            product :
            null;
        });
      }
    }

Code Name Category

<tbody *ngFor="let product of filteredArray; let i = index">
  <tr>
    <td>{{ product.code }}</td>
    <td>{{ product.name }}</td>
    <td>{{ product.category }}</td>
  </tr>
</tbody>

Just call filterArray also within the subscription callback after you assigned this.productsArray to apply an initial filter. — MoxxiManagarm
– MoxxiManagarm, Commented May 17, 2021 at 13:01

Sai Vamsi · Accepted Answer · 2021-05-17 13:02:47Z

2

When filteredArray is initialized, it was empty. The filteredArray is filled with some value only when filterArray() is called. So provide the value for filteredArray in ngOnInit(). Try this:

ngOnInit(): void {
    this.getProducts().subscribe((res) => {
      this.productsArray = res;
      this.filteredArray = [...this.productsArray];
    });
  }

answered May 17, 2021 at 13:02

Sai Vamsi

9579 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lautaro Lopez Ruiz · Accepted Answer · 2021-05-17 13:29:40Z

you need to use a pipe, some like this

@Pipe({
    name: 'filterPipe'
})
export class FilterPiper implements PipeTransform {
    transform(array: any[], properties: any[], filter: string) {
        if (!array) {
            return [];
        }
        if (!properties.length || !filter) {
            return array;
        }

        filter = filter.trim().toLowerCase();
        return array.filter((element) => 
      !!(properties.find((property) => {
          const valueString = product[property].toString().toLowerCase();
          return valueString.includes(filter)
        )) 
    });
}

and in the html

 <tbody *ngFor="let product of productsArray | filterPipe: propertiesArray : searchText ; let i = index">
  <tr>
    <td>{{ product.code }}</td>
    <td>{{ product.name }}</td>
    <td>{{ product.category }}</td>
  </tr>
</tbody>

remember the pipe needs to be declarated in a module and imported in your component

Collectives™ on Stack Overflow

Angular table sorting, without Angular Material

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related