How to populate API data during the load of the page in an angular App?-CodePudding

I have a service in angular which is calling a 3rd party API that recently started failing if we tried to fetch all the values in one go. I have since modified the code to limit the number of records it should send using query params. Since I am not that well versed the UI stack wanted to understand what changes can I incorporate in the component or the service to still populate all the values when the page gets loaded.

I modified the service from

  getAllParty() : Observable<[IParty]> {
      if (this.parties === null)
      {
        return this.http.get<[IParty]>(location 'api/party');
      }

TO the following

getAllParty(fromCode) : Observable<[IParty]> {
      if (this.parties === null)
      {
        return this.http.get<[IParty]>(location 'api/party?limit=1000&fromCode=' fromCode);
      }
      
      return of(this.parties);
    
  }

The component constructor has the following code

parties: IParty[];
constructor(private partyService: PartyService) {
    partyService.getAllParty().subscribe((parties: IParty[]) => {
      this.parties = parties
      this.filteredParties = this.userInputParty.valueChanges.pipe(
        startWith<string | IParty[]>(''),
        map(value => typeof value === 'string' ? value : this.lastFilter),
        map(filter => this.filter(filter))
      );
}

I need some help to understand where would my changes go in this case? Do I need to execute the getAllParty() until it starts returning blank perhaps?

EDIT: Providing additional details The party-selector html has following code

<section>
    <div>
        <mat-form-field >
            <input type="text" placeholder="Select Party" aria-label="Number" matInput [formControl]="userInputParty"
                [matAutocomplete]="auto">
            <mat-hint>Enter text to find party by name</mat-hint>

        </mat-form-field>
        <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
            <mat-option *ngFor="let party of filteredParties | async | slice : 0 : 20" [value]="selectedParties">
                <div (click)="optionClicked($event, party)">
                    <mat-checkbox [checked]="party.selected" (change)="toggleSelection(party)"
                        (click)="$event.stopPropagation()">
                        {{ party.name }}
                    </mat-checkbox>
                </div>
            </mat-option>
        </mat-autocomplete>
        <button *ngIf="selectedParties?.length > 0" (click)="clearSelection()" mat-raised-button type="submit" mat-fab color="primary" aria-label="Clear Selection">
            <mat-icon>clear_all</mat-icon>
          </button>
        
    </div>
    <br><br>
   
</section>

The mapping model

export interface IParty {
    name: string;
    code: string;
    shortName: string;
    selected : boolean;
    type : string
  }

CodePudding user response：

In response of API do this:

public limit = 1000;
public parties: IParty[] = [];

constructor(private partyService: PartyService) {
  this.getParties(0, 1000);
}

private async getParties(offset, limit) {
  await this.partyService.getAllParty(offset, limit).subscribe(async (parties: IParty[]) => {
    this.parties = this.parties.concat(parties);
    if (parties.length === limit) {
      await this.getParties(offset   limit, limit);
    }
  });
}