Tips for initializing matTableDataSource with values from an Observable during the initial loading phase

Question

Tips for initializing matTableDataSource with values from an Observable during the initial loading phase

Having difficulty populating the MatTableDataSource when the application starts up. Upon startup, the table is empty with a *matNoDataRow message displayed. However, once I click on any column to sort or input anything in the filter, the data immediately appears.

I attempted using hardcoded values for table rows and it worked fine - everything loaded upon startup. I have a functional StackBlitz example where I replicated everything except for the subscription because it retrieves values from my database: StackBlitzExampleOfHardcodedArray

I also tried populating an array in the service and calling it in the component after it's done loading but unfortunately, the rows still did not show.

This is my original method:


parseUserData: any;
returnValue: any = [];
getAllBooksFromDatabase(): BooksData[] { //all books from Bookshelf
  this.returnValue.splice(0, this.returnValue.length);
  this.data.getBooks().subscribe((data: any) => {
    this.parseUserData = JSON.parse(JSON.stringify(data));
    this.parseUserData.map((item: any) => {
      if (item.fine != 0) {
        this.returnValue.push({
          uid: item.uid,
          bid: item.bid,
          bookTitle: item.bookTitle,
          authorLastName: item.authorLastName,
          authorFirstName: item.authorFirstName,
          issuedDate: item.issuedDate,
          period: item.period,
          fine: item.fine,
          warning: item.warning
        });
      }
    })
    return this.returnValue;
  }
}

EDIT: This is my service method for fetching data:


public getBooks(): Observable<any> {
  return this.http.get('http://localhost:8080/books')
    .pipe(map((books: any) => books));
}

EDIT: Here is part of the result - books:


[
  {
    "warning": "",
    "issuedDate": "in library",
    "period": "0",
    "bookTitle": "Balade Petrice Kerempuha",
    "bid": "158744286",
    "fine": "0",
    "authorLastName": "Krleža",
    "authorFirstName": "Miroslav",
    "bookGenre": "poetry",
    "uid": ""
  },
  ...
 ]

How can I display all table rows upon startup?

Your advice is greatly appreciated. Thank you!

angular typescript observable mat-table

Answer 1

Answer №1

The this.returnValue variable is assigned asynchronously, leading to it being empty upon return. To resolve this issue, consider using the RxJS map operator in conjunction with Array's map and filter functions. Rather than returning the value directly, assign it within the ngOnInit hook.

Implement the following solution:

ngOnInit() {
  this.getAllBooksFromDatabase().subscribe(
    books => {
      this.dataSourceBook = new MatTableDataSource(books);
      this.dataSourceBook.paginator = this.paginator;
      this.dataSourceBook.sort = this.sort;
    }
  );
}

getAllBooksFromDatabase(): Observable<BooksData[]> { // Fetch all books from Bookshelf
  return this.data.getBooks().pipe(
    map(data => {
      return data
        .filter(item => item.fine != 0)        // <-- Add your condition here
        .map(item => {
          return {
            uid: item.uid,
            bid: item.bid,
            bookTitle: item.bookTitle,
            authorLastName: item.authorLastName,
            authorFirstName: item.authorFirstName,
            issuedDate: item.issuedDate,
            period: item.period,
            fine: item.fine,
            warning: item.warning
          }
        })
      })
  );
}

For more information on handling asynchronous data, refer to this resource.

Answer 2

The this.returnValue variable is assigned asynchronously, leading to it being empty upon return. To resolve this issue, consider using the RxJS map operator in conjunction with Array's map and filter functions. Rather than returning the value directly, assign it within the ngOnInit hook.

Implement the following solution:

ngOnInit() {
  this.getAllBooksFromDatabase().subscribe(
    books => {
      this.dataSourceBook = new MatTableDataSource(books);
      this.dataSourceBook.paginator = this.paginator;
      this.dataSourceBook.sort = this.sort;
    }
  );
}

getAllBooksFromDatabase(): Observable<BooksData[]> { // Fetch all books from Bookshelf
  return this.data.getBooks().pipe(
    map(data => {
      return data
        .filter(item => item.fine != 0)        // <-- Add your condition here
        .map(item => {
          return {
            uid: item.uid,
            bid: item.bid,
            bookTitle: item.bookTitle,
            authorLastName: item.authorLastName,
            authorFirstName: item.authorFirstName,
            issuedDate: item.issuedDate,
            period: item.period,
            fine: item.fine,
            warning: item.warning
          }
        })
      })
  );
}

For more information on handling asynchronous data, refer to this resource.

Answer 3

Answer №2

Give this a shot

  displayBooks() {
    this.libraryData
      .fetchLibraryBooks()
      .pipe(
        filter((data) => !!data),
        map((data: any[]) => {
          data.map((item: any) => {
            if (item.fine != 0) {
              return {
                uid: item.uid,
                bid: item.bid,
                bookTitle: item.bookTitle,
                authorLastName: item.authorLastName,
                authorFirstName: item.authorFirstName,
                issuedDate: item.issuedDate,
                period: item.period,
                fine: item.fine,
                warning: item.warning,
              };
            }
          });
        })
      )
      .subscribe((books: LibraryBookData) => {
        this.dataSource = new MatTableDataSource(books);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      });
  }

Answer 4

Give this a shot

  displayBooks() {
    this.libraryData
      .fetchLibraryBooks()
      .pipe(
        filter((data) => !!data),
        map((data: any[]) => {
          data.map((item: any) => {
            if (item.fine != 0) {
              return {
                uid: item.uid,
                bid: item.bid,
                bookTitle: item.bookTitle,
                authorLastName: item.authorLastName,
                authorFirstName: item.authorFirstName,
                issuedDate: item.issuedDate,
                period: item.period,
                fine: item.fine,
                warning: item.warning,
              };
            }
          });
        })
      )
      .subscribe((books: LibraryBookData) => {
        this.dataSource = new MatTableDataSource(books);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      });
  }

Tips for initializing matTableDataSource with values from an Observable during the initial loading phase

Answer №1

Answer №2

Similar questions

I am unable to retrieve the values from a manually created JavaScript list using querySelectorAll()

Optimal method for retrieving data from a JSON object using the object's ID with a map

Issue encountered when retrieving ProductCardComponent: Unable to access property 'Payload' as it is undefined

Encountering an npm issue: Clash in peer dependency between @angular/fire version 6.0.2 while trying to add angular/fire module

What is the reason for the inclusion of information in the error log by the `ng

Automatic Guarding in the Angular Router

Interference of NestJS provider classes in separate event loops causing conflicts

ng-class not recognizing multiple arguments

What is the best way to set the text color of cell data in a mat-table to white for the entire row when the row is selected as

Troubleshooting image quality problem with @capacitor/camera on web platform

"Using Angular's NgFor directive to efficiently organize and collapse data within

Ways to conceal all rows in Ag-grid during data loading

Encountering an issue with importing mongoose models while trying to create a library

Having trouble with 'npm <script-command>' not working? Try changing it to 'npm run-script <script-command>' instead

Achieve Full Height with Bootstrap 4!

Enhanced security and performance through HTTP interceptor with Authentication and Cache

"Customizing API requests based on specific conditions with n

Synchronizing Events across Two JavaScript Applications

When using AngularJS 2, the class identity is lost when resolving a Promise during fetching

Is it necessary to provide initialState in React Context when using useState in TypeScript, even if it serves no purpose?