Angular - Rendering filtered array issue

Question

I'm following this tutorial and I'm stuck in this feature where I have to display a filtered array (object coming from firebase) when clicking an anchor. I followed all the implementation steps but I'm missing something...The code:

HTML:

<div class="row">
    <div class="col-3">
        <div class="list-group">
            <a
            *ngFor="let c of categories$ | async"
            routerLink="/"
            [queryParams]="{category: c.$key}"
            class="list-group-item list-group-item-action"
            [class.active]="category===c.$key">
            {{c.name}}
            </a>
        </div>
    </div>


<div class="col">
<div class="row">
    <ng-container *ngFor="let p of filteredProducts; let i =index">
        <div class="col">

            <div class="card" style="width: 15rem;">
                <img src="{{p.imageURL}}">
                <div class="card-body">
                    <h5 class="card-title">{{p.title}}</h5>
                    <p class="card-text">{{p.price | currency: 'EUR': true}}</p>
                    <a href="#" class="btn btn-primary">Add to cart</a>
                </div>
            </div>

        </div>
        <div></div>
    </ng-container>

       </div>
    </div>
</div>

TS class:

products:Product[]=[];
  filteredProducts: Product[]=[];
  category: string;
  categories$;
  constructor(
    private productService: ProductService, 
    private categoryService: CategoryService,
    private route: ActivatedRoute) { 
    this.categories$=this.categoryService.getCategories();
    this.productService.getAll().subscribe(products =>this.products=products)

    this.route.queryParamMap.subscribe(params =>{
      this.category = params.get('category');

      this.filteredProducts = (this.category) ?
      this.products.filter(p=>p.category===this.category) :
      this.products;
    });

  }

The service retrives data correcly, but when I log the filtered array, I get nothing...Can someone give me a hand?

EDIT:

You should nest the subscribes, They are both async calls. There is no guarantee once you hit "this.route.queryParamMap..." the previous getAll() method has finished. It's likely whats happening. You are trying to filter an empty array — sinanspd
– sinanspd, Commented Jul 31, 2019 at 19:50

bryan60 · Accepted Answer · 2019-07-31 20:30:17Z

1

your attempting to set your array before you retrieve the products. subscribe is an asynchronous operation so it doesn't execute in the order it's started, but rather in the order the results arrive, and queryParams is a type of observable that emits immediately, so that subscribe is executing BEFORE the products arrive, instead, use observable combineLatest and the map operator and the async pipe:

filteredProducts$: Observable<Product[]>;

....

const category$ = this.route.queryParamMap.pipe(map(params => params.get('category')));
this.filteredProducts$ = combineLatest(this.productService.getAll(), // combine the streams
                                       category$)
                           .pipe(
                             tap(([products, category])=> console.log(products, category)), // this is how you log in a stream
                             map(([products, category]) => // you'll have the latest value from both
                               (category) ? // run your filter
                                 products.filter(p => p.category.toLowerCase() === category.toLowerCase()) :
                                 products),
                             tap(filteredProducts => console.log(filteredProducts)) // this is how you log in a stream
                           );

then in your template just use the async pipe like you did with categories$

<ng-container *ngFor="let p of filteredProducts$ | async; let i =index">

an Observable is JUST a definition of how to handle a stream of data. logging things outside of that stream will not show you the values inside of that stream. the tap operator exists to allow you to log things inside of the stream

edited Jul 31, 2019 at 20:30

answered Jul 31, 2019 at 19:51

bryan60

29.5k5 gold badges56 silver badges71 bronze badges

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

6 Comments

Mellville Over a year ago

I understand your logic but as is the output is the same and I can't even read the params in the console, it stays undefined..

bryan60 Over a year ago

it depends where you're logging.... it's jsut a stream definition until it's executed

bryan60 Over a year ago

added a logging line for you

Mellville Over a year ago

the logs of the code you provided show an empty array of filter...I don't get this because even assuring the object comes first than the reading of params, the filter arry remains empty

bryan60 Over a year ago

i looked at your edits... it looks like the "categories" are in all lower case but the category field on your products has it's first letter upper case.... this would not yield an exact match

|

Collectives™ on Stack Overflow

Angular - Rendering filtered array issue

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related