Enhancing the basic HTTP request Observable method

Question

Enhancing the basic HTTP request Observable method

I am working with restaurant objects and have a method that returns all restaurants from the database:

    getRestaurantAll() : Observable<Restaurant[]>
    {
      return this.http.get<Restaurant[]>(`${this.baseUrl}api/Restaurant`)
        .pipe(
          catchError(this.handleError<Restaurant[]>(`getRestaurantAll`,[]))
        );
    }

Now, I want to create a similar method with a small modification. The important array properties of Restaurant are TypesOfFood (Pizza, Burgers, Tacos, Ramen) and MethodsOfPayment (Credit, Debit, Cash, Vouchers).

Currently, the user's selections are stored in string variables as userFoodChoice and userPaymentChoice.

I aim to show the user a list of Restaurants that accept both food and payment choices simultaneously.

How can I adjust the above request to filter only the Restaurants that match both of the users' selections?

angular database typescript rxjs observable

Answer 1

Answer №1

It is recommended to handle this control logic on the backend rather than the frontend, allowing for a list of restaurants that match users' preferences to be directly generated from the backend. However, if you prefer to implement it on the frontend, you can utilize the map function in the following manner:

return this.http.get<Restaurant[]>(`${this.baseUrl}api/Restaurant`)
    .pipe(
      map((res: Restaurant[]) => {
         const filteredRestaurants = res.filter(
            (restaurant) => {
              // Include your conditions here
            });
         return filteredRestaurants;
      }),
      catchError(this.handleError<Restaurant[]>(`getRestaurantAll`,[]))
    );

Answer 2

It is recommended to handle this control logic on the backend rather than the frontend, allowing for a list of restaurants that match users' preferences to be directly generated from the backend. However, if you prefer to implement it on the frontend, you can utilize the map function in the following manner:

return this.http.get<Restaurant[]>(`${this.baseUrl}api/Restaurant`)
    .pipe(
      map((res: Restaurant[]) => {
         const filteredRestaurants = res.filter(
            (restaurant) => {
              // Include your conditions here
            });
         return filteredRestaurants;
      }),
      catchError(this.handleError<Restaurant[]>(`getRestaurantAll`,[]))
    );

Answer 3

Answer №2

If you're looking to narrow down your selection based on specific elements from two arrays, simply retrieve the values you want to filter by (such as filteredTypesOfFood and filteredMethodsOfPayment) and use them as the basis for your filtering logic.

filteredTypesOfFood = 'Pizza';
filteredMethodsOfPayment = 'Credit';

...
return this.http.get<Restaurant[]>(`${this.baseUrl}api/Restaurant`)
    .pipe(
      map((res: Restaurant[]) => {
         const filteredRestaurants = res.filter(
            (restaurant) => {
              return (restaurant.type === this.filteredTypesOfFood
                     || restaurant.method === this.filteredMethodsOfPayment);
            });
         return filteredRestaurants;
      }),
      catchError(this.handleError<Restaurant[]>(`getRestaurantAll`,[]))
    );

For a simplified example showcasing how this can work using a mock array of restaurants, check out this functional demo: https://stackblitz.com/edit/angular-restaurant-filtered-array?file=src/app/app.component.ts

Answer 4

If you're looking to narrow down your selection based on specific elements from two arrays, simply retrieve the values you want to filter by (such as filteredTypesOfFood and filteredMethodsOfPayment) and use them as the basis for your filtering logic.

filteredTypesOfFood = 'Pizza';
filteredMethodsOfPayment = 'Credit';

...
return this.http.get<Restaurant[]>(`${this.baseUrl}api/Restaurant`)
    .pipe(
      map((res: Restaurant[]) => {
         const filteredRestaurants = res.filter(
            (restaurant) => {
              return (restaurant.type === this.filteredTypesOfFood
                     || restaurant.method === this.filteredMethodsOfPayment);
            });
         return filteredRestaurants;
      }),
      catchError(this.handleError<Restaurant[]>(`getRestaurantAll`,[]))
    );

For a simplified example showcasing how this can work using a mock array of restaurants, check out this functional demo: https://stackblitz.com/edit/angular-restaurant-filtered-array?file=src/app/app.component.ts

Enhancing the basic HTTP request Observable method

Answer №1

Answer №2

Similar questions

The 'React' namespace does not contain the exported members 'ConsumerProps' or 'ProviderProps'

Error 404: The requested resource could not be located on the server running nginx with Angular version 8

Using ng-bootstrap with Bootstrap 4 beta as an npm dependency

Navigating with Angular 2 routing

When authentication is successfully completed, proceed to the designated URL

Troubleshooting: TypeScript not functioning properly with Create Next App dev server启动时有问题

"Utilizing mongoDb's $set and $setOnInsert directives for updating specific fields within nested properties

What purpose does the Angular core module serve?

Tips for Showing an Image on an HTML Page Offline

Building a personalized React component poses challenges when working with MUI REACT interfaces

How can I redirect a page using an axios interceptor in Next.js?

Deployment of Typescript.js files in Angular 2

Sync up the Microsoft Access database with the database of the Silverstripe website

arranging multiple popular columns in an ng-template for an angular table

Comparison: executing an immediately invoked function expression (IIFE) and a separate

Difficulty with Bootstrap Carousel (image is displayed but fails to transition/change)

Compiling Typescript upon saving in Sublime Text 3

What is the process in TypeScript for defining a custom variation of a generic function?

Troubleshooting Cors Problem between Angular 2 Form Data and Express

Guide to making a prop optional in reactjs with the help of typescript