Angular 15/14 Display JSON Data in Table Example

Angular 15/14 display JSON data in HTML table; Through this tutorial, i am going to show you how to read json file and display JSON file data into the HMTL table in Angular 15/14 apps.

Angular 15/14 Display JSON Data in Table Example

Follow the below steps to display JSON file data into HTML table in Angular 15/14 apps; as follows:

• 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

Run the following command on command prompt to install angular app:

ng new my-new-app

Step 2 – Install & Setup Bootstrap Package

Run command on command prompt 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

Go to 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

Go to 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

Go to 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

Run the following command on the command prompt 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 15/14; In this tutorial, you have leaned how to fetch data from JSON file and display data in a table.

Recommended Angular Tutorials