Using categories stored in enums in Angular

Question

I have enums on back- and front-end side with category names:

export enum CategoryEnum {
    All = 'All',
    Category1 = 'Category1',
    Category2 = 'Category2',
    Category3 = 'Category3',
    Category4 = 'Category4'
}

I am displaying them in this way (shop.component.html - this is after many trials):

    <h5 class="text-warning ml-3">Categories</h5>
        <ul class="list-group my-3">
            <li class="list-group-item" 
                *ngFor="let category of categories | keyvalue"
                [class.active]="category.value === this.categorySelected"
                [value]="category.value"
                (click)="onCategorySelected(category.value)">
                {{category.value}}
            </li>
        </ul>

This is my shop.service.ts:

@Injectable({
  providedIn: 'root'
})
export class ShopService {
  baseUrl = 'https://localhost:5001/api/';

  constructor(private http: HttpClient) { }

    getProducts(category?: string) {
    let params = new HttpParams();

    if (category) {
      params.append('category==', category);
    //params.append('?Filters=category%3D%3D', category);
    }

    return this.http.get<IProduct[]>(this.baseUrl + 'products', {observe: 'response', params})
      .pipe(
        map(response => {
          return response.body
        })
      );
  }
}

In Swagger, this query shows correct results ("%3D" equals "=" so "category%3D%3D4" equals "category==4"): Curl curl -X GET "https://localhost:5001/api/Products?Filters=category%3D%3D4" -H "accept: /" Request URL https://localhost:5001/api/Products?Filters=category%3D%3D4

After many trials, I cannot fix that after click on some category displaying corresponding products on front-end. shop.componet.ts:

@Component({
  selector: 'app-shop',
  templateUrl: './shop.component.html',
  styleUrls: ['./shop.component.scss']
})
export class ShopComponent implements OnInit {
  products: IProduct[];
  categories = Object.keys(CategoryEnum);
  categorySelected: string;

  constructor(private shopService: ShopService) { }

  ngOnInit(): void {
    this.getProducts();
  }

  getProducts() {
    this.shopService.getProducts(this.categorySelected).subscribe((response: any) => {
      this.products = response.data.$values;
    }, error => {
      console.log(error);
    });
  }
  
  onCategorySelected(categoryName: string) {
    this.categorySelected = categoryName;
    this.getProducts();
  }
}

If it possible please provide short explanation also.

Edit: I tried many different paths after changes advised by @traynor:

getProducts(category?: string) {
    let params = new HttpParams();

    if(category) {
      // params.append('category==', category.toString());
      // params.append('category=', category.toString());
      // params.append('category==', category);
      // params.append('category=', category);
      // params.append('filters=category==', category.toString());
      // params.append('filters=category=', category.toString());
      // params.append('filters=category==', category);
      // params.append('filters=category=', category);
      // params.append('Filters=category', category);
      // params.append('Filters=category', category.toString());
      // params.append('Filters=category=', category);
      // params.append('Filters=category=', category.toString());
      // params.append('Filters=category==', category);
      // params.append('Filters=category==', category.toString());
      // params.append('?Filters=category==', category);
      // params.append('?Filters=category==', category.toString());
      // params.append('?Filters=category=', category);
      // params.append('?Filters=category=', category.toString());
      // params.append('?Filters=category', category);
      // params.append('?Filters=category', category.toString());
      // params.append('?Filters=category%3D%3D', category);
      // params.append('?Filters=category%3D%3D', category.toString());
      // params.append('?Filters=category%3D', category);
      // params.append('?Filters=category%3D', category.toString());
      params.append('?Filters=category', category);
      // params.append('?Filters=category', category.toString());
      
    }

But still doesn't work.

Edit 2: After applying another changes from @traynor I saw that he was right about that HttpParams is immutable. Also I needed to correct the route:

if (category) {
      params = new HttpParams().append('Filters=category=', category);
    }

Huge thanks one more time I am beginner with front-end and not yet working as developer and this is my portfolio project for future work :)

You have a typo in your code. `params.append('category==', category)` should be `params.append('category=', category)` — , Oct 03 '22 at 18:09
@E.Maggini there is no error, just cannot retrieve/filter coresponding products after clicking on one of the categories. — luca88, Oct 03 '22 at 20:52
@E.Maggini I am using Sieve package for ASP.Net and "==" means "equals" — luca88, Oct 04 '22 at 19:08

traynor · Accepted Answer · 2022-10-05T07:18:48.837

1

The problem is that params is empty because HttpParams is immutable.

try chaining it, maybe like this:

let params: HttpParams | undefined;

if (category) {
  params = new HttpParams().append('category==', category);
}

Also, you should pass enum to the template to create key-value from the enum, instead of Object.keys(CategoryEnum);, not sure how you got that working..

categories = Object.keys(CategoryEnum);

should be:

categories = CategoryEnum;

edited Oct 05 '22 at 07:18

answered Oct 04 '22 at 12:23

traynor

5,490
3
13
23

I have applied your suggestions but still doesn't work. I am using Sieve package for ASP.Net and "==" means "equals". In Swagger I retrieve correct products either I use "category==4" or "category==Category4" – luca88 Oct 04 '22 at 20:38
@luca88 try the updated code – traynor Oct 05 '22 at 07:19
I almost gave up... but I saw after applying your changes in DevTools/Network that finally shows some route but was incorrect and I corrected its to: `if (category) { params = new HttpParams().append('Filters=category=', category); }` Huge thanks, I am beginner with front-end and not yet working as developer. – luca88 Oct 05 '22 at 18:14

Using categories stored in enums in Angular

1 Answers1