Angular订阅和observable重复获取数据

Question

I am having problem using subscription and observable

here's my code

this is my inventory.service.ts

getInventoryList = (page: string,pageSize,size) => {
    const userLocation = this.authService.getUserLocation();
    let queryParams = `?page=${page}&loc=${userLocation}&size=${size}&pageSize=${pageSize}`;
      this.http
      .get<{ success: boolean, message: string, inventoryList: any }>(BACKEND_URL_item + '/getInventoryList' + queryParams)
      .pipe(retry(3), catchError((data) => {
        return EMPTY;
      }),map((data) => {
        if (page === 'inventory') {
          return {
            extractedInventoryList: data.inventoryList.map((item: any) => {
              return {
                itemId: item._id,
                itemID: item.itemID,
                itemName: item.itemName,
                itemSellingPrice: item.itemSellingPrice,
                itemPurchasePrice: item.itemPurchasePrice,
                itemAveragePurchasePrice: item.itemAveragePurchasePrice,
                itemBaseUnit: item.itemBaseUnit,
                itemCategory: item.itemCategory,
                itemReorderPoint: item.itemReorderPoint,
                itemTotalQuantity: item.itemTotalQuantity,
                itemSumQuantity: item.itemSumQuantity,
                itemLocation: item.itemLocation,
                itemSubLocation: item.itemSubLocation
              };
            }),
            success: data.success,
            message: data.message
          };
        } else {
          return {
            extractedInventoryList: data.inventoryList.map((item: any) => {
              return {
                itemId: item._id,
                itemName: item.itemName,
                itemTotalQuantity: item.itemTotalQuantity,
                itemLocation: item.itemLocation,
                itemSubLocation: item.itemSubLocation
              };
            }),
            success: data.success,
            message: data.message
          };
        }
      }))
      .subscribe((transformedData) => {
          this.inventoryList = transformedData.extractedInventoryList;
          this.inventoryListObserver.next({
            inventoryList: [...this.inventoryList],
            success: transformedData.success,
            message: transformedData.message
          });

        }
      });

  }

  getInventoryListListener = () => {
    return this.inventoryListObserver.asObservable();
  }

here's my inventory.component.ts

getInventoryItem(pageSize,size) {

    for(let x=0;x<size;x= x+10){

          this.inventoryService.getInventoryList('inventory',pageSize,x);
          this.itemListSubscription = this.inventoryService
        .getInventoryListListener()
        .subscribe((responseData: { inventoryList: IItem[], success: boolean, message: string }) => {
          if (!responseData.success) {
            this.spinner.stop();

          } else {
            this.itemList = this.itemList.concat(responseData.inventoryList);
            this.spinner.stop();
            this.itemListBackup = this.itemList;
          }
           this.showToasts(responseData.message, responseData.success);
        });




    }

  }

I'm trying to get data every 10 items.. I am using mongodb and it returns exactly what I want but when I get it through Angular it inserts some duplicate arrays to the itemList

can anyone explain why is that?

Answer 1

First would return the http Observable

public getInventoryListo(page: string, pageSize: number, size: number): Observable<any> {
  const userLocation = this.authService.getUserLcation();
  const queryParams = `?page=${page}&loc=${userLocation}&size=${size}&pageSize=${pageSize}`;
  return this.http
    .get<{ success: boolean, message: string, inventoryList: any }>(BACKEND_URL_item + '/getInventoryList' + queryParams)
    .pipe(
      .map((data) => {
        if (page.toLowerCase() === 'inventory') {
          return {
            extractedInventoryList: data.inventoryList.map((item: any) => {
              return {
                itemId: item._id,
                itemID: item.itemID,
                itemName: item.itemName,
                itemSellingPrice: item.itemSellingPrice,
                itemPurchasePrice: item.itemPurchasePrice,
                itemAveragePurchasePrice: item.itemAveragePurchasePrice,
                itemBaseUnit: item.itemBaseUnit,
                itemCategory: item.itemCategory,
                itemReorderPoint: item.itemReorderPoint,
                itemTotalQuantity: item.itemTotalQuantity,
                itemSumQuantity: item.itemSumQuantity,
                itemLocation: item.itemLocation,
                itemSubLocation: item.itemSubLocation
              };
            }),
            success: data.success,
            message: data.message
          };
        } else {
          return {
            extractedInventoryList: data.inventoryList.map((item: any) => {
              return {
                itemId: item._id,
                itemName: item.itemName,
                itemTotalQuantity: item.itemTotalQuantity,
                itemLocation: item.itemLocation,
                itemSubLocation: item.itemSubLocation
              };
            }),
            success: data.success,
            message: data.message
          };
        }
      })
      retry(3), 
      catchError((data) => {
        return EMPTY;
      })
    );
}

And then just make 1 request insted to x-times calling the api

getInventoryItem(pageSize: number, maxSize: number): void {
  this.itemList = [];

  for (let i = 0; i < maxSize;  i += 10) {
    this.inventoryService.getInventoryList('inventory', pageSize, x).subscribe((response: any) => {
      this.spinner.stop();
            this.showToasts(responseData.message, responseData.success);

      if (response.success) {
        for (let j of response.inventoryList) this.itemList.push(j);
        this.itemListBackup = this.itemList;
      }
    });
  }
}

Also if you use ngFor to display the list in your template you can use the slice pipe .

eg: *ngFor="let item of itemList | slice: 0: 10" This will show the first 10 the entries.