Angular showing json object in html table

Question

Hello guys i have json data from firestore and i want to display these data in html table.

This is my customer-list.component.html

<body>
  <div class="container">
    <div class="title">
      <h3>Customer Table</h3>
    </div>
    <div class="row">
      <div class="col-md-12">
      </div>
      <div class="col-lg-8 col-md-10 ml-auto mr-auto">
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th class="text-center">#</th>
                <th>Name</th>
                <th>Age</th>
                <th>Active</th>
              </tr>
            </thead>
            <tbody>
              <div *ngFor="let customer of customers" style="width: 300px;">
                <app-customer-details [customer]='customer'></app-customer-details>
              </div>
        <div style="margin-top:20px;">
          <button type="button" class="button btn-danger" (click)='deleteCustomers()'>Delete All</button>
        </div>
        </tbody>
        </table>
      </div>
      </div>

Seems like there is nothing wrong in there.

This is my customer-details.component.html

<div *ngIf="customer">
<tr>
   <td>
       <label>First Name: </label> {{customer.name}}
     </td>
     <td>
       <label>Age: </label> {{customer.age}}
     </td>
     <td>
       <label>Active: </label> {{customer.active}}
     </td>
     <span class="button is-small btn-primary" *ngIf='customer.active' (click)='updateActive(false)'>Inactive</span>

     <span class="button is-small btn-primary" *ngIf='!customer.active' (click)='updateActive(true)'>Active</span>

     <span class="button is-small btn-danger" (click)='deleteCustomer()'>Delete</span>
</tr>
</div>

But my table output is :

Thanks for answers.

in your detail component add <pre>{{customer | json}}</pre> to check if you are getting data or not? — Ali Adravi
– Ali Adravi, Commented Feb 20, 2020 at 15:15
Getting data correctly but it doesnt show data correctly first name:john should be under name column of table. — Deniz Firat
– Deniz Firat, Commented Feb 20, 2020 at 15:21

Rahul Bansal · Accepted Answer · 2020-02-20 17:44:54Z

When you look at the DOM tree you will find out that

<tr><app-customer-details>...</app-customer-details</td>

This will not result in the component rendering inside the table as a but will cram the entire component HTML template inside one column.

By adding an attribute selector to the component i.e. selector: 'app-customer-details, [app-customer-details]', you can add the selector directly to the element like so and now the elements inside the component HTML template will render correctly inside the table.

Look at this link;

The correct code is as follows: Customer-list.component.html

<div class="container">
    <div class="title">
        <h3>Customer Table</h3>
    </div>
    <div class="row">
        <div class="col-md-12">
        </div>
        <div class="col-lg-8 col-md-10 ml-auto mr-auto">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <!-- <th class="text-center">#</th> -->
                            <th>Name</th>
                            <th>Age</th>
                            <th>Active</th>
                        </tr>
                    </thead>
                    <tbody>
              <tr *ngFor="let customer of customers" [customerDetails]="customer">
              </tr>
                        <div style="margin-top:20px;">
                            <button type="button" class="button btn-danger" (click)='deleteCustomers()'>Delete All</button>
                        </div>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Customer-details.component.html

<td>
  {{customerDetails.name}}
</td>
<td>
  {{customerDetails.age}}
</td>
<td>
  {{customerDetails.active}}
</td>

Customer-details.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'customerDetails, [customerDetails]',
  templateUrl: './customer-details.component.html',
  styleUrls: ['./customer-details.component.css']
})
export class CustomerDetailsComponent implements OnInit {

  @Input() customerDetails: object = {};
  constructor() { }

  ngOnInit() {
  }

}

This is what i looking for thank you just added [customerDetails] selector to my component it works.

WorksLikeACharm · Accepted Answer · 2020-02-20 14:53:55Z

0

Don´t limit the width of a customer´s component to 300px, like you did here:

<div *ngFor="let customer of customers" style="width: 300px;">

answered Feb 20, 2020 at 14:53

WorksLikeACharm

4141 gold badge7 silver badges14 bronze badges

1 Comment

Deniz Firat Over a year ago

Still same , i tried different ways like initialize table in customer-details but still same data don't seperate table's column

Ali Adravi · Accepted Answer · 2020-02-20 15:34:29Z

0

You have many things which will not render your table properly:

<tbody>
  <div *ngFor="let customer of customers" style="width: 300px;">
      <app-customer-details [customer]='customer'>
      </app-customer-details>
   </div>
   ....
</tbody>

This will render like this:

<tbody>
  <div ...>
      <app-customer-details>
       <div> <tr>.....</tr></div>
      </app-customer-details>
   </div>
   ....
</tbody>

Which is not correct HTML.

Change you detail component to use ng-template:

<ng-template >
  <tr *ngIf="customer">
    <td><label>First Name: </label> {{customer.name}}</td>
    <td><label>Age: </label> {{customer.age}}</td>
    <td><label>Active: </label> {{customer.active}}</td>
    <td> 
      Note: All spans should also be inside a TD tag
    </td>

  </tr>
</ng-template>

answered Feb 20, 2020 at 15:34

Ali Adravi

23k9 gold badges93 silver badges97 bronze badges

1 Comment

Deniz Firat Over a year ago

still same when i used ng-template table is empty but data passes , i tried ng-container but it gives same result as picture

Collectives™ on Stack Overflow

Angular showing json object in html table

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related