To get & display json data in html table with angular 16; In this tutorial, you will learn how to get & display JSON data in an HTML table using Angular 16 project.
Angular 16 Display JSON Data in HTML Table Tutorial
To get JSON data and display JSON data in HTML using Angular 16, you can use the following steps:
- Step 1 – Set Up Your Angular Project
- Step 2 – Install & Configure Bootstrap
- Step 3 – Create JSON Data File
- Step 4 – Use Component to Display JSON Data
- Step 5 – Create the HTML Template
- Step 6 – Define Required Modules in tsconfig.json
- Step 7 – Start the Development Server
Step 1 – Set Up Your Angular Project
Open your terminal or cmd and use the Angular CLI to create a new Angular project:
ng new my-new-app
Step 2 – Install & Configure Bootstrap
Once you have set up angular project into your server. Then you need to install and configure bootstrap in angular project, you can do it by using the following command:
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
let’s assume you have a JSON file called users.json with the following content:
[
{
"id": 1,
"name": "John Doe",
"email": "[email protected]"
},
{
"id": 2,
"name": "Jane Smith",
"email": "[email protected]"
},
{
"id": 3,
"name": "Bob Johnson",
"email": "[email protected]"
}
]
Step 4 – Use Component to Display JSON Data
Open src/app/app.component.ts and update it as follows:
import { Component } from '@angular/core';
import UsersJson from './users.json';
interface USERS {
id: Number;
name: 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 the HTML Template
Open src/app/app.component.html and create the HTML template to display the data in a table:
<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>Email</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of Users">
<td>{{ user.id }}</td>
<td>{{ user.name }}</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 Development Server
You can now start the development server to see your Angular application in action. Run the following command in the terminal:
ng serve
Open your web browser and navigate to http://localhost:4200/ to view your Angular application displaying JSON data in an HTML table.
Conclusion
That’s it! You’ve successfully created an Angular 16 application that fetches JSON data and displays it in an HTML table. You can further style the table or add more features as needed for your project.
