filtering an Observable in Angular

Question

in my application I have the task to filter an observable. I have an array of products coming from my server. When the user clicks on a button, 7 random numbers are generated and these are matched with the product array and 7 products are filtered out.

Code from my ProductListComponent Class:

numbers: number[] = [];
filteredproducts: IProduct[] = [];

constructor(private productservice: ProductService) {

}

ngOnInit(): void {

}

getRandomProducts(): void {
let size: number;
this.filteredproducts = [];
this.productservice.getallproducts()
  .subscribe(
    (products: IProduct[]) => {
      size = products.length;
      this.getrandomnumbers(size);
      console.log(this.numbers);
      products.map(
        product => {

          for (let i = 0; i < this.numbers.length; i++) {

            if (Product.Id == this.numbers[i]) {
              this.filteredproducts.push(product);
              console.log("product added");

            }
          }
        }
      )
      //this.filteredproducts = products
    }

  );
}

getrandomnumbers(size: number): void {

  for (let i = 0; i < 7; i++) {
   this.numbers[i] = Math.floor(Math.random() * size + 1)
  }

}

Code from my ProductService Class :

export class ProductService {

private URL = 'http://localhost:3000/products';

constructor(private http: HttpClient) { }

getallproducts(): Observable<IProduct[]> {
 return this.http.get<IProduct[]>(this.URL)
}

Everything works fine and the array is filtered. But could I do something to improve it? The code for the function getRandomProducts seems a bit long to me. After that I want the user to be able to go to another page, but to save the products in the list when he comes back to the list page. This does not quite work yet. How would you solve this? I do not want to work with the local cache of the browser. Thanks for your answers.

Does this answer your question? [Sort array of objects by string property value](https://stackoverflow.com/questions/1129216/sort-array-of-objects-by-string-property-value) — AlleXyS, Apr 01 '20 at 11:13
This is opinion based. There are multiple ways but certainly you don't need to generate a separate set of numbers and match it back. You could directly pick **n** number of random objects from the array. See here: https://stackoverflow.com/q/19269545/6513921 — ruth, Apr 01 '20 at 11:43

Adis Alj · Answer 1 · 2020-04-02T10:40:32.613

You can remove this.filteredProducts from the function because it has already a length of zero in the class itself.

getRandomProducts() {
    this.productservice.getallproducts().pipe(take(1)) // emits only one value
     .subscribe(productsArray => {
        const size = productsArray.length; // size can be a const, does not change
        this.getRandomNumbers(size);

        this.filteredproducts = productsArray.filter(
          product => product.id === this.numbers.find(number => number === product.id) // checking if the product.id does exist in the numbers array
        );
      });
  }

filtering an Observable in Angular

1 Answers1