Angular 12 Display JSON Data in Table Tutorial

Last updated on: by Editorial Team

Angular 12 Display JSON File Data in Table. A JSON file is a useful file that helps to store simple data structures and objects in JSON format, typically known as JavaScript Object Notation. Ideally, it is a common data interchange format, basically used for transferring data between a web application and a server.

In this guide, we will mention the procedure for showing data from JSON file in Angular Table. To accomplish this feature, you will learn how to read a json file in angular 12 conversely display json data in an HTML table.

An HTML table is beneficial for arranging information or data, typically in rows and columns or probably in a wider complex structure. Tables are extensively adopted in research, data analysis etc.

In this tutorial, you will create a basic angular app, create a JSON data file in angular and implement json data from json file to the HTML table.

How to Read Angular JSON File and Display Data in Table

  • Step 1: Install Angular App
  • Step 2: Create JSON Data File
  • Step 3: Create User Interface
  • Step 4: Create Bootstrap Table
  • Step 5: Update tsconfig JSON
  • Step 6: Start Angular App

Install Angular App

First and foremost, make sure to install the angular cli on your development machine using the given below command.

npm install -g @angular/cli

Next, with the help of the Angular CLI schematic, install the angular application.

ng new ng-demo

Get inside the project folder:

cd ng new ng-demo

Execute command to install the latest version of Bootstrap in angular.

npm install bootstrap --save

Next, 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"
]

Create JSON Data File

In this step, you have to create a users.json file; furthermore, you must add the provided json objects to create a json file.

Open and add code in src/app/users.json file.

[{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz"
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv"
  },
  {
    "id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha",
    "email": "Nathan@yesenia.net"
  },
  {
    "id": 4,
    "name": "Patricia Lebsack",
    "username": "Karianne",
    "email": "Julianne.OConner@kory.org"
  },
  {
    "id": 5,
    "name": "Chelsey Dietrich",
    "username": "Kamren",
    "email": "Lucio_Hettinger@annie.ca"
  },
  {
    "id": 6,
    "name": "Mrs. Dennis Schulist",
    "username": "Leopoldo_Corkery",
    "email": "Karley_Dach@jasper.info"
  },
  {
    "id": 7,
    "name": "Kurtis Weissnat",
    "username": "Elwyn.Skiles",
    "email": "Telly.Hoeger@billy.biz"
  },
  {
    "id": 8,
    "name": "Nicholas Runolfsdottir V",
    "username": "Maxime_Nienow",
    "email": "Sherwood@rosamond.me"
  },
  {
    "id": 9,
    "name": "Glenna Reichert",
    "username": "Delphine",
    "email": "Chaim_McDermott@dana.io"
  },
  {
    "id": 10,
    "name": "Clementina DuBuque",
    "username": "Moriah.Stanton",
    "email": "Rey.Padberg@karina.biz"
  }
]

Create User Interface

In the previous step, we created a JSON file, now get into the app.component.ts file, import the UsersJson file and create the USERS interface.

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);
  }
}

Create Bootstrap Table

In this step, you have to use the bootstrap table UI component to display the data from JSON file.

Now, open the app.component.html file, append the entire given code within the angular html file.

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

Update tsconfig JSON

Before you start the application, you have to tweak your tsconfig.json file, define the resolveJsonModule and esModuleInterop inside the compilerOptions object.

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

...
...

Start Angular App

Now, you can open the terminal and start writing the given command and hit enter to start the angular app:

ng serve

This is the url which you need to view the app.

http://localhost:4200

Angular 12 Display JSON Data in Table Tutorial

Conclusion

An application is a confluence of multiple small features, with the primary purpose to solve users problems. Theoretically, whenever you see, you found data everywhere. Seldom, you have to integrate data in a table format, as we have discussed before, how useful a table is to display data.

This tutorial taught us how to fetch data from JSON file and display data in a table. We also looked at how to use the nfFor directive to showcase json data. We hope you liked this tutorial; the angular 12 read json file data to HTML is finished.