How to Display Data from Json File in Angular?

In this tutorial, you will learn how to display data from json file in angular 9/8/7. i would like to share with you how to read json file in angular 9. This post will give you simple example of display json data in html table using angular 8. follow bellow step for how to create a json file in angular.

In this example, we will learn how to create json file in angular. then we will display data from created json file. so basically we will read data from json file in angular app.

Sometime we need to display our data in table format for front end from json file. we will use ngfor directive for display data in table from read json file. we will also use bootstrap for displaying data in angular application. you can also easily display data from json file in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 application.

Let's see simple following step to done simple example that will help you to displaying data in angular app.

Create New App

If you are doing example from scratch then You can easily create your angular app using bellow command:

ng new my-app

Create JSON File

src/app/students.json

[
  {
    "id": 1,
    "name": "Hardik",
    "email": "hardik@gmail.com",
    "gender": "male"
  },
  {
    "id": 2,
    "name": "Paresh",
    "email": "Paresh@gmail.com",
    "gender": "male"
  },
  {
    "id": 3,
    "name": "Kiran",
    "email": "kiran@gmail.com",
    "gender": "female"
  },
  {
    "id": 4,
    "name": "Mahesh",
    "email": "mahesh@gmail.com",
    "gender": "male"
  },
  {
    "id": 5,
    "name": "Karan",
    "email": "karan@gmail.com",
    "gender": "male"
  }
]

updated Ts File

In this file we will create students object array using Student interface. so let's see bellow file code.

src/app/app.component.ts

import { Component } from '@angular/core';
import studentsData from './students.json';
  
interface Student {
    id: Number;
    name: String;
    email: String;
    gender: String;
}
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  
  students: Student[] = studentsData;
}

Template Code:

In this step, we will write code for display data of stuidents object array variable using ngfor directive.

I used bootstrap class on this form. if you want to add than then follow this link too: Install Boorstrap 4 to Angular 9.

src/app/app.component.html

<div class="container">
  
  <h1>How to Display Data from Json File in Angular 9/8/7? - ItSolutionStuff.com</h1>
  
  <table class="table table-striped">
    <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
          <th>Gender</th>
        </tr>
    </thead>
    <tbody>
      <tr *ngFor="let student of students">
        <td>{{ student.id }}</td>
        <td>{{ student.name }}</td>
        <td>{{ student.email }}</td>
        <td>{{ student.gender }}</td>
      </tr>
    </tbody>
  </table>
</div>

Now you can run your application using following command:

ng serve

You can see bellow layout for demo. let's follow bellow step.

Preview:

I hope it can help you...