Angular 12 Display JSON Data in Table Example

To display JSON data in HTML table using angular 12; This tutorial will show you a simple way on how to display JSON file data into the HMTL table in angular 12/11/10 apps. And as well as show you how to use the bootstrap library with HTML table.

How to Display JSON File Data Into HTML Table in Angular

Follow the following steps to display JSON file data into HTML table in angular 12/11/10 apps:

• Step 1 – Create New Angular App
• Step 2 – Install & Setup Bootstrap Package
• Step 3 – Create JSON Data File
• Step 4 – Update app.Component ts File
• Step 5 – Create HTML Table and Display List From Json
• Step 6 – Define Required Modules in tsconfig.json
• Step 7 – Start the Angular App

Step 1 – Create New Angular App

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Install & Setup Bootstrap Package

Execute command to install the latest version of Bootstrap in angular apps:

npm install bootstrap --save

Then, add the Bootstrap CSS path in angular.json file to enable the styling:

"styles": [
     "node_modules/bootstrap/dist/css/bootstrap.min.css",
     "src/styles.scss"
]

Step 3 – Create JSON Data File

Create json file; so visit src/app directory and create users.json file. Then add the following code into it:

[{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "[email protected]"
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "[email protected]"
  },
  {
    "id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha",
    "email": "[email protected]"
  },
  {
    "id": 4,
    "name": "Patricia Lebsack",
    "username": "Karianne",
    "email": "[email protected]"
  },
  {
    "id": 5,
    "name": "Chelsey Dietrich",
    "username": "Kamren",
    "email": "[email protected]"
  },
  {
    "id": 6,
    "name": "Mrs. Dennis Schulist",
    "username": "Leopoldo_Corkery",
    "email": "[email protected]"
  },
  {
    "id": 7,
    "name": "Kurtis Weissnat",
    "username": "Elwyn.Skiles",
    "email": "[email protected]"
  },
  {
    "id": 8,
    "name": "Nicholas Runolfsdottir V",
    "username": "Maxime_Nienow",
    "email": "[email protected]"
  },
  {
    "id": 9,
    "name": "Glenna Reichert",
    "username": "Delphine",
    "email": "[email protected]"
  },
  {
    "id": 10,
    "name": "Clementina DuBuque",
    "username": "Moriah.Stanton",
    "email": "[email protected]"
  }
]

Step 4 – Update app.Component ts File

Update app.component.ts file; so visit src/app directory and open app.component.ts. Then add the following code into component.ts file:

import { Component } from '@angular/core';

import UsersJson from './users.json';

interface USERS {
    id: Number;
    name: String;
    username: String;
    email: String;
}

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

export class AppComponent {

  Users: USERS[] = UsersJson;

  constructor(){
    console.log(this.Users);
  }
}

Step 5 – Create HTML Table and Display List From Json

Create table in html to display json file data into it; So, visit src/app/ directory and open app.component.html and update the following code into it:

<div class="container mt-5">

  <h2>Angular Display Data from Json File Example</h2>

  <table class="table table-striped">
    <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Username</th>
          <th>Email</th>
        </tr>
    </thead>
    <tbody>
      <tr *ngFor="let user of Users">
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.username }}</td>
        <td>{{ user.email }}</td>
      </tr>
    </tbody>
  </table>
</div>

Step 6 – Define Required Modules in tsconfig.json

Define the resolveJsonModule and esModuleInterop inside the compilerOptions object; as shown below:

{
  "compileOnSave": false,
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true,

...
...

Step 7 – Start the Angular App

Execute the following command on the terminal to start angular app:

ng serve

Open the browser and type the given url then hit enter to run the app:

http://localhost:4200

Conclusion

Display json data in HTML table using angular 12; In this tutorial, you have leaned how to fetch data from JSON file and display data in a table.

Recommended Angular Tutorials