Showing an array in tabular form using Angular

Question

Showing an array in tabular form using Angular

I have a single-element list that appears as shown below

My goal is to present the data in a table with headers for Author Name and Title. However, my current code displays all the titles in one row instead of creating separate rows for each Title and Author Name. How can I fix this issue?

See the table created using the code below

<table class='table table-striped' aria-labelledby="tableLabel" *ngIf="authorWithBooks">
  <thead>
    <tr>
      <th>Author Name</th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let authorWithBook of authorWithBooks">
      <td>{{ authorWithBook.authorName }}</td>
      <td>{{ authorWithBook.bookNameList }}</td>
    </tr>
  </tbody>
</table>

c#html css angular html-table

Answer 1

Answer №1

To efficiently display author and book title data, utilize two loops: one for each author and the second for each book title. The creation of tr elements will occur within the second loop, while the first loop can be enclosed in an <ng-container>.

Here is an example code snippet:


   <ng-container *ngFor="let authorWithBook of authorWithBooks">
    <tr *ngFor="let bookName of authorWithBook.bookNameList">
      <td>{{ authorWithBook.authorName }}</td>
      <td>{{ bookName }}</td>
    </tr>
    </ng-container>

Refer to this functioning StackBlitz link for a live demonstration.

Answer 2

To efficiently display author and book title data, utilize two loops: one for each author and the second for each book title. The creation of tr elements will occur within the second loop, while the first loop can be enclosed in an <ng-container>.

Here is an example code snippet:


   <ng-container *ngFor="let authorWithBook of authorWithBooks">
    <tr *ngFor="let bookName of authorWithBook.bookNameList">
      <td>{{ authorWithBook.authorName }}</td>
      <td>{{ bookName }}</td>
    </tr>
    </ng-container>

Refer to this functioning StackBlitz link for a live demonstration.

Showing an array in tabular form using Angular

Answer №1

Similar questions

Leverage the VTTCue Object in an Angular2 project using Typescript

Is the contact form confirmation message displaying too prominently?

Are you looking to create a dynamic quiz platform with Angular?

Angular2: Utilizing filter and search functionalities for an unordered list

The website is experiencing crashes in IE11 whenever the developer tools are closed

When navigating to a new URL in Angular 7, the browser will automatically redirect to the home component

The 'npm update' command seems to be failing when attempting to update dependencies within Angular2

``There seems to be an issue with the Angular Material Table dataSource, as it is not binding correctly or updating

Trigger a click (or selection) on a specific dropdown option using jQuery

Include the button beneath the Rating section using JQuery or AJAX

Insert the characteristics of the object into the header of the table, and populate the rows of the table

Enhance the validation of multiple fields in Angular through asynchronous AbstractControl in groupForm

Displaying JavaScript Countdown in PHP Table

"Applying CSS styles to highlighted text using jQuery - how can I do it

Increase the div id using jQuery

Create a vibrant stroke and conclude with a circular marker beneath the content with CSS

When Ruby on Rails is combined with HTML and CSS and marked as selected, it will be displayed with

How to Fetch Questions from a Remote Source Using Dynamic Forms in Angular 2

JQuery mouseover event not triggering after modification of HTML

Incorporating ratings and heart icons next to every movie title