Filtering data using angular

Question

I'm new to angular and am trying to filter data. I've created a webpage displaying a list of hotels, but would like to filter them by their star rating. I'm usnure on how to even attempt this. Any help would be greatly appreciated!

hotels.componenent.ts :

import { Component } from '@angular/core';
import { WebService } from './web.service';



@Component({
  selector: 'hotels',
  templateUrl: './hotels.component.html',
  styleUrls: ['./hotels.component.css']
})
export class HotelsComponent {

    hotel_list: any;
    page: number = 1;

    constructor(public webService: WebService) { }

    ngOnInit() {
        if (sessionStorage['page']) {
          this.page = Number(sessionStorage['page'])
        }
        this.hotel_list = this.webService.getHotels(this.page);
    }

Web services.ts:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';


@Injectable()
export class WebService {

    private hotelID: any;


    constructor(private http: HttpClient) { }

    getHotels(page: number) { 
        return this.http.get('http://localhost:5000/api/v1.0/hotels?pn=' + page);

    }

hotels.components.html:

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div *ngFor = "let hotel of hotel_list | async">
                <div class="card text-white bg-primary mb-3" 
                     style ="cursor : pointer"
                     [routerLink]="['/hotels', hotel._id]">
                    <div class="card-header">
                        {{ hotel.hotel }}
                    </div>
                    <div class="card-body">
                        This hotel is based in
                        {{ hotel.city }}
                    </div>
                    <div class="card-footer">
                        {{ hotel.rating }}
                        stars
                    </div>
                </div>
            </div>

Are these filter criteria you expected to be applied need to happen at the UI level or API level? Is the API support querying the hotels by their rating? — Ravikumar Rajendran
– Ravikumar Rajendran, Commented Nov 26, 2022 at 14:21

Satsangpriyadas Swami · Accepted Answer · 2022-11-27 04:34:02Z

1

Assuming that you need to filter the hostels on the client side after fetching the hotels. That is, only the hotels returned for page = 1.

in hotels.componenent.ts :

filtered_hotels_list: any = []; //empty array
//......
    ngOnInit() {
        if (sessionStorage['page']) {
          this.page = Number(sessionStorage['page'])
        }
        this.webService.getHotels(this.page).subscribe(data => { 
                this.hotel_list = data
                this.filter();
        });
        
}
filter(rating:number = -1) { // rating = -1 shows all
     if(rating > -1) {
         this.filtered_hotels_list = this.hotel_list.filter((o:any) => o.rating == rating)
     } else this.filtered_hotels_list = this.hotel_list
 
}

in hotels.components.html:

<div *ngFor = "let hotel of filtered_hotel_list">

And implement your UI to add a filter button, which calls the filter(5) function.

edited Nov 27, 2022 at 4:34

answered Nov 26, 2022 at 19:54

Satsangpriyadas Swami

2373 silver badges5 bronze badges

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

4 Comments

Beth McCoy Over a year ago

Thanks for getting back! I'm getting an error for (o => o.rating == rating), saying 'parameter o implicitly has any type'. any idea how to resolve this?

Wen W Over a year ago

if you have a Hotel class, use o: Hotel. Otherwise, o: any should do it.

Satsangpriyadas Swami Over a year ago

this.filtered_hotels_list = this.hotel_list.filter((o: any) => o.rating == rating)

Beth McCoy Over a year ago

How would I implement this into my UI? This is what I have so far:

<div class="dropdown">     <div *ngFor = "let hotel of filtered_hotels_list"></div>     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">       Dropdown button     </button>     <div class="dropdown-menu">       <a class="dropdown-item" href="#">5 Star</a>       <a class="dropdown-item" href="#">4 Star</a>       <a class="dropdown-item" href="#">3 Star</a>       <a class="dropdown-item" href="#">2 Star</a>       <a class="dropdown-item" href="#">1 Star</a>     </div>   </div>

Collectives™ on Stack Overflow

Filtering data using angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related