Angular Display JSON Data in Table : This instructional exercise will give you illustration of Angular showcase json data in table. you can comprehend an idea of how to show information in Angular . this model will help you Angular show information in table. I disclosed just about how to show information in Angular. Okay, how about we plunge into the means.

At some point we need to show our information in table arrangement for front end. we will utilize *ngfor mandate for show information in table. we will likewise utilize bootstrap for showing information in Angular application.

JSON is an abbreviation for JavaScript Object Notation, is an open standard organization, which is lightweight and text-based, planned expressly for intelligible information exchange. It is a language-free information design. It upholds pretty much every sort of language, structure, and library.

How about we see straightforward after advance to done basic model that will help you to showing information in Angular application.

 

Create New App

Assuming you are doing model without any preparation, You can undoubtedly make your Angular application utilizing cry order:

ng new my-app

In this record we will make understudies object cluster utilizing Student interface. so how about we see howl record code.

src/app/app.component.ts

import { Component } from '@angular/core';
  
interface Employee{
    id: Number;
    name: String;
    email: String;
    gender: String;
}
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
    
  students: Employee[] = [
    {
      id: 1,
      emp_code : "3505",
      name: "Rohit",
      email: "rohit@gmail.com",
      gender: "male"
      
    },
    {
      id: 2,
      emp_code : "3506",
      name: "Amit",
      email: "amit@gmail.com",
      gender: "male"
    },
    {
      id: 3,
      emp_code : "3507",
      name: "Kumkum",
      email: "kumkum@gmail.com",
      gender: "female"
    },
    {
      id: 4,
      emp_code : "3508",
      name: "Ajit",
      email: "ajit@gmail.com",
      gender: "male"
    },
    {
      id: 5,
      emp_code : "3509",
      name: "Mohit",
      email: "mohit@gmail.com",
      gender: "male"
    },
  ]
}

In this step, we will write code for display data of employee object array variable using ngfor directive.

I have used bootstrap class.

src/app/app.component.html

<div class="container"> 
  <table class="table table-striped">
    <thead>
        <tr>
          <th>S.no</th>
          <th>Name</th>
          <th>Employee Code</th>
          <th>Email</th>
          <th>Gender</th>
        </tr>
    </thead>
    <tbody>
      <tr *ngFor="let emp of employee">
        <td>{{ emp.id }}</td>       
        <td>{{ emp.name }}</td>
        <td>{{ emp.emp_code}}</td>       
        <td>{{ emp.email }}</td>  
        <td>{{ emp.gender }}</td>     
      </tr>
    </tbody>
  </table>
</div>

Presently you can run your application using following command.

ng serve

 

Output :

Angular Display JSON Data in Table Example

Please follow and like us:

Tagged in:

, , , ,