Angular json data isnt showing in table

Question

I have a simple table i need to show data from json but its showing blank i have fixed data in json format in .ts i just need to show it on html.

My html code

<section id="shopping-cart">
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header">
                    <div class="card-title-wrap bar-warning"  style="float: left;">
                        <h4 class="card-title">Invoice Summary</h4>
                    </div>
                    <div style="float: right;">
                        <a routerLink="/full-layout/add-form" class="btn btn-raised mr-1 btn-success">Add</a>

                    </div>
                </div>
                
                <div class="col-xl-4 col-lg-6 col-md-12 mb-1">
                    <fieldset class="form-group">
                        <label for="helpInputTop">Search</label>

                        <input type="text" class="form-control" id="helpInputTop">
                    </fieldset>
                </div>
                <div class="card-body">
                    <div class="card-block">
                        <div class="table-responsive">
                            <table id="recent-orders" class="table table-hover table-xl mb-0">
                                <thead>
                                    <tr>
                                        <th class="border-top-0">Status</th>                                
                                        <th class="border-top-0">Invoice#</th>
                                        <th class="border-top-0">Customer Name</th>
                                        <th class="border-top-0">Categories</th>
                                        <th class="border-top-0">Shipping</th>
                                        <th class="border-top-0">Amount</th>
                                        <th class="border-top-0">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr *ngFor="let x of data">
                                        <td class="text-truncate"><i class="fa fa-dot-circle-o success font-medium-1 mr-1"></i> Paid</td>
                                        <td class="text-truncate"><a href="#">{{ x.invoice }}</a></td>
                                        <td class="text-truncate">
 
                                            <span>{{ x.name }}</span>
                                        </td>
 
                                        <td>
                                            <button type="button" class="btn btn-sm btn-outline-danger round">{{ x.Category }}</button>
                                        </td>
                                        <td>
                                            <ngb-progressbar type="danger" [value]="25" [striped]="true" class="progress-bar-md bg-gradient-x-danger"></ngb-progressbar>
                                        </td>
                                        <td class="text-truncate">$ {{ x.price }}</td>
                                        <td>
                                            <a class="success p-0" data-original-title="" title="">
                                                <i class="fa fa-pencil font-medium-3 mr-2"></i>
                                            </a>
                                            <a class="info p-0" data-original-title="" title="">
                                                <i class="fa fa-check font-medium-3 mr-2"></i>
                                            </a>
                                            <a class="danger p-0" data-original-title="" title="">
                                                <i class="fa fa-trash-o font-medium-3 mr-2"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    
                                </tbody>
                            </table>
                            <ngb-pagination [collectionSize]="10" [pageSize]="2" [maxSize]="7" [rotate]="true" ></ngb-pagination>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

.ts

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

declare var require: any;
const data: any = [
    {
        "name": "Ethel",
        "invoice": "XC-23As",
        "status": "PAID",
        "Amount": 100,
        "Category": 'Hardware'
    },
    {
        "name": "Ethel",
        "invoice": "XC-23As",
        "status": "PAID",
        "Amount": 100,
        "Category": 'Hardware'
    }, {
        "name": "Ethel",
        "invoice": "XC-23As",
        "status": "PAID",
        "Amount": 100,
        "Category": 'Hardware'
    }, {
        "name": "Ethel",
        "invoice": "XC-23As",
        "status": "PAID",
        "Amount": 100,
        "Category": 'Hardware'
    },

];

@Component({
    selector: 'app-form',
    templateUrl: './form.component.html',
    styleUrls: ['./form.component.scss']
})
export class FormComponent {


    constructor() {

    }

}

Its showing blank

You can see I have simple json array hardcoded I need to just show it by ngFor but its showing blank I am doing any mistake? I just simple show my data by ngFor so i can view in my table

Does the answer below helped you?

Roman A.
– Roman A.

2021-05-19 14:37:16 +00:00
Commented May 19, 2021 at 14:37 — Roman A.
– Roman A., Commented May 19, 2021 at 14:37

marc_s · Accepted Answer · 2021-07-11 12:49:19Z

4

You need to set data variable to the class property in the following way:

export class FormComponent {

    data = [
    {
        "name": "Ethel",
        "invoice": "XC-23As",
        "status": "PAID",
        "Amount": 100,
        "Category": 'Hardware'
    },...]
    
    constructor() {}
}

Angular can't interpolate the const data variable into the HTML, because this is not a property of the component's class.

edited Jul 11, 2021 at 12:49

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered May 18, 2021 at 9:51

Roman A.

7525 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

Angular json data isnt showing in table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related