What is the best way to populate an Angular Bootstrap Table Widget with data obtained from an API request?

Question

What is the best way to populate an Angular Bootstrap Table Widget with data obtained from an API request?

I am currently in the process of making an API call and utilizing the received data in a Bootstrap Angular Table Widget.

The specific widget I am utilizing can be found here: Complete example (Angular powered bootstrap widget)

Ensure you are working with the complete example that includes the service and pagination features.

I attempted to replace the existing data with the response from my API call.

constructor(public service: CountryService) {
    this.countries$ = service.countries$;
    this.total$ = service.total$;
    this.headers = new QueryList<NgbdSortableHeader>();
}

API service:

getusers2() {
    return this.http.get<Country[]>(this.getusersEndpoint, this.httpOptions);
}

While this approach partially works and displays the expected output in the table, the service still relies on the hard-coded class COUNTRIES. As a result, the filtering, pagination, and searching functionalities do not function properly. How can I resolve this issue?

The primary objective is to set up a basic table on the page, fetch the data, and update the table accordingly with the API response.

An ideal solution would involve:

<ngbd-table-skeleton ngIf=loading></ngbd-table-skeleton>
<ngbd-table-complete ngIf=!loading [data]="countries"></ngbd-table-complete>

Here, I would set loading to true in the OnInit function, fetch the data, set the data, toggle loading to false, and display the updated table with functional pagination, filtering, and sorting.

Implementing this approach might be challenging given my current level of expertise in Angular. If anyone has a potential solution or alternative method, I would greatly appreciate your insights.

angular typescript bootstrap-5 angular-bootstrap

Answer 1

Answer №1

To effectively utilize the "country.service", it is crucial to modify the code to fetch data from the API instead of hardcoding values like "COUNTRIES". Additionally, integrating "pipe(map)" is essential for handling observables efficiently.

It is recommended to send parameters such as sortColumn, sortDirection, pageSize, page, and searchTerm to the API to retrieve only relevant data. Thus, the _search function should be updated as follows:

The revised _search function will look like this:

private _search(): Observable<SearchResult> {
    const { sortColumn, sortDirection, pageSize, page, searchTerm } = this._state;
      return this.httpClient.get(....) //<--call to your API

In cases where there are few items, you can cache the data and return either the cached values or make a call to the API for the entire list of countries.

countries:Country[]; //<--a variable to store the whole countries

private _search(): Observable<SearchResult> {
    const { sortColumn, sortDirection, pageSize, page, searchTerm } =
      this._state;
   
    //if "this.countries" have values, obs%= of(this.countries)
    //else obs$=the call to your API

    const obs$=this.countries?of(this.countries):
               this.httpClient.get(..).pipe(tap((res: Country[])=>{
                    this.countries=res;
               }))

    //we work with observables using "pipe"
    return obs$.pipe(
      map((res: Country[]) => {
        //you sort:
        let countries = sort(res, sortColumn, sortDirection);

        //filter
        countries = countries.filter((country) =>
          matches(country, searchTerm, this.pipe)
        );
        const total = countries.length;

        //paginate
        countries = countries.slice(
          (page - 1) * pageSize,
          (page - 1) * pageSize + pageSize
        );

        return { countries, total };
      })
    );
  }

It is evident that managing observables is comparable to handling arrays, as both involve using them within a pipe.map operation.

Answer 2

To effectively utilize the "country.service", it is crucial to modify the code to fetch data from the API instead of hardcoding values like "COUNTRIES". Additionally, integrating "pipe(map)" is essential for handling observables efficiently.

It is recommended to send parameters such as sortColumn, sortDirection, pageSize, page, and searchTerm to the API to retrieve only relevant data. Thus, the _search function should be updated as follows:

The revised _search function will look like this:

private _search(): Observable<SearchResult> {
    const { sortColumn, sortDirection, pageSize, page, searchTerm } = this._state;
      return this.httpClient.get(....) //<--call to your API

In cases where there are few items, you can cache the data and return either the cached values or make a call to the API for the entire list of countries.

countries:Country[]; //<--a variable to store the whole countries

private _search(): Observable<SearchResult> {
    const { sortColumn, sortDirection, pageSize, page, searchTerm } =
      this._state;
   
    //if "this.countries" have values, obs%= of(this.countries)
    //else obs$=the call to your API

    const obs$=this.countries?of(this.countries):
               this.httpClient.get(..).pipe(tap((res: Country[])=>{
                    this.countries=res;
               }))

    //we work with observables using "pipe"
    return obs$.pipe(
      map((res: Country[]) => {
        //you sort:
        let countries = sort(res, sortColumn, sortDirection);

        //filter
        countries = countries.filter((country) =>
          matches(country, searchTerm, this.pipe)
        );
        const total = countries.length;

        //paginate
        countries = countries.slice(
          (page - 1) * pageSize,
          (page - 1) * pageSize + pageSize
        );

        return { countries, total };
      })
    );
  }

It is evident that managing observables is comparable to handling arrays, as both involve using them within a pipe.map operation.

What is the best way to populate an Angular Bootstrap Table Widget with data obtained from an API request?

Answer №1

Similar questions

Generate a fresh JSON object following a click event triggered by an HTTP PUT request

Tips for executing horizontal drag and replace

Angular 2.0 encountered an unexpected value from the module 'AppModule' which appears to be an '[object Object]'

Can a single shield protect every part of an Angular application?

Replacing a component dynamically within another component in Angular 2

Retrieve the value of an HTML attribute from a nested element with Angular 2

TS2349 emerges when incorporating lazy-loading in React

Can a TypeScript-typed wrapper for localStorage be created to handle mapped return values effectively?

Issue: Button ClickEvent is not triggered when the textArea is in onFocus mode

Error encountered due to a circular reference in the dependency library

I am puzzled as to why my function's return type transforms into a promise when I interact with the cell.value or use console.log

Prisma atomic operations encounter errors when attempting to update undefined values

Ways to invoke a function in HTML aside from using the (click)="function()" syntax

Angular - Ensuring service completion before proceeding with navigation

Angular6 Error: Property 'catch' is missing

Exploring the functionality of the Angular snackbar feature

Ways to change the Date format to something like [25 Jan 2024]

Error: The browser threw a TypeError because Object(...) is not a function

Encountering an error on Ionic 4, Angular 8: Unable to access property 'subscribe' of undefined

Steps to Transform String Array into Prisma Query Select Statement