How to get random object in a json array from server using ngFor Angular

Question

I need to get a random object from a JSON array, now I`m using pipe slice from 0 to 16 in the carousel. my products are shown one by one, but I want to show them randomly. Can someone help with this???

there is my JSON file:

{
"id": 40,
"name": "car",
"shortDetails": "Cars 2",
"description": "Cars 2",
"pictures": "cars2.png",
"newItem": true,
"category": "PREDEFINED_CAR",
"price": 33,
"sale": false,
"discount": null,
"salePrice": null,
"productType": "CAR",
"sku": "",
"stock": 10,
"subCategory": {
  "id": 10,
  "name": "Cars",
  "translationKey": "Cars",
  "relations": null
}

HTML code:

<section class="section-b-space p-t-0">
    <div class="container">
        <div class="row">
            <div class="col">
                <owl-carousel-o class="product-m no-arrow" [options]="ProductSliderConfig">
                    <ng-container *ngFor="let product of products$ | async | slice:0:16">
                        <ng-template carouselSlide>
                            <div class="product-box">
                                <app-product-box
                                        [product]="product"
                                        [currency]="productsService?.Currency"
                                        [thumbnail]="true"
                                        [cartModal]="true">
                                </app-product-box>
                            </div>
                        </ng-template>
                    </ng-container>
                </owl-carousel-o>
            </div>
        </div>
    </div>
</section>

TypeScript code:

constructor(private _store: Store<AppState>) {
    this.products$ = this._store.pipe(select(selectProductList));
}
products$;

Answer 1

just shuffle the array of elements. see this SO

produtsSuffle$=this.product$.pipe(
    map((res: any[]) =>
      res
        .map(x => ({ value: x, order: Math.random() }))
        .sort((a, b) => a.order - b.order)
        .map(x => x.value)
    )
  );

Update If we has problems with the suffle always can use a "cache". It's only to have a variable "data". The idea is that you return the suffle array or the data. in the way

//in pseudo code
//return (!data)?the suffle array:of(data)

data:any[]=null;

produtsSuffle$=!data?this.product$.pipe(
    map((res: any[]) =>
      res
        .map(x => ({ value: x, order: Math.random() }))
        .sort((a, b) => a.order - b.order)
        .map(x => x.value)
    ),
    tap(res=>this.data=res)
  ):of(data)

Or subscribe to the productSuffle and work with data

produtsSuffle$.subscribe(res=>{
   this.data=res;
})

If we has a service "serviceState" we can do

get data(){
   return this.serviceState.data;
}
set data(){
   this.serviceState.data=data;
}