To display JSON data in HTML table using angular 14; Through this tutorial, you will learn how to read json file and display JSON file data into the HMTL table in angular 14 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 14
Use the following steps to display JSON file data into HTML table in angular 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
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 14; In this tutorial, you have learned how to fetch data from JSON file and display data in a table.
Recommended Angular Tutorials
