Angular 16 Display JSON Data in Table Example

Angular 16 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 16 apps.

Angular 16 Display JSON Data in Table Example

Follow the below steps to display JSON file data into HTML table in Angular 16 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 16; In this tutorial, you have leaned how to fetch data from JSON file and display data in a table.

Recommended Angular Tutorials