How to display object of array data on html table in Angular

Question

I need to display below object of array in html table like that image. My data array like this.

data = [{id: 0 , name: 'one' , tags: ['a' , 'b' , 'c']} , {id: 1 , name: 'two', tags: ['r' , 't' , 'y']} , {id: 2 , name: 'three' , tags: ['a' , 'b' , 'c']} , {id: 3 , name: 'four' , tags: ['a' , 'b' , 'c']}]; .

So i tried like this but it's not working as expect on image.

 <table class="table table-hover table-bordered">
    <thead>
    <tr>
        <th scope="col">Tag Type</th>
        <th scope="col">Tags</th>
        <th scope="col">Action</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let tag of data; let i = index">
        <td>{{ tag.id }}</td>
            <table class="table">
            <tr *ngFor="let el of tag.tags">
              <td>{{el}}</td>
            </tr>
            </table>
        <td>
            <div align="center">
              <a matTooltip="edit tag"><i>mode_edit</i></a>
            </div>
        </td>
    </tr>

    </tbody>
</table>

this is the result i got.Any idea how to do this?

Maybe I don't understand this, but what is the problem? I cant figure it out from mockup. — tmsbrndz
– tmsbrndz, Commented Jul 1, 2021 at 16:52
check the images. I need display a,b,c rows line both 1st and last columns. — Ranindu
– Ranindu, Commented Jul 1, 2021 at 17:06
How looks like the expected result with your example data set? — tmsbrndz
– tmsbrndz, Commented Jul 1, 2021 at 18:19

Shantanu Bharatia · Accepted Answer · 2021-07-03 11:55:08Z

1

I have made a few modifications into the code. Instead of creating a new nested table,I have tried create separate rows in the main table. I have hid the TagType And Action, where it is not to be displayed based on the index. For the striped pattern, I have added "table-striped" class to the table.

The Html code would look like this

<table class="table table-hover table-bordered table-striped">
  <thead>
    <tr>
      <th scope="col">Tag Type</th>
      <th scope="col">Tags</th>
      <th scope="col">Action</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let tag of data; let i = index">
      <tr *ngFor="let el of tag.tags; let i2=index">

        <td *ngIf="i2==0"> {{tag.id}} </td>
        <td *ngIf="i2!=0"> </td>
        <td> {{el}} </td>
        <td>
          <div align="center">
            <a matTooltip="edit tag"><i>mode_edit</i></a>
          </div>
        </td>
      </tr>
    </ng-container>

  </tbody>
</table>

StackBlitz working demo: https://stackblitz.com/edit/angular-ivy-aqmrzy

answered Jul 3, 2021 at 11:55

Shantanu Bharatia

612 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ranindu Over a year ago

Oh dude it'w working. thank you so much!!

Collectives™ on Stack Overflow

How to display object of array data on html table in Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related