Read Local JSON Files In Angular

In this tutorial, I will show you how to read local JSON files in Angular 2 | 7 | 8 applications. There are various methods for reading local JSON files in Angular. Let me show you the easiest way to read local JSON files in Offline Views app.

Let’s create a JSON file, we name it data.json you can name it whatever you want!

Data.json

[{
    "id": 1,
    "name": "leon messi",
    "username": "messi",
    "email": "messi@april.biz",
    "phone": "1-770-736-8031 x56442",
    "website": "code-android-example.org"
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv",
    "phone": "010-692-6593 x09125",
    "website": "anastasia.net"
  },
  {
    "id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha",
    "email": "Nathan@yesenia.net",
    "phone": "1-463-123-4447",
    "website": "ramiro.info"
  },
  {
    "id": 4,
    "name": "Patricia Lebsack",
    "username": "Karianne",
    "email": "Julianne.OConner@kory.org",
    "phone": "493-170-9623 x156",
    "website": "kale.biz"
  },
  {
    "id": 5,
    "name": "Chelsey Dietrich",
    "username": "Kamren",
    "email": "Lucio_Hettinger@annie.ca",
    "phone": "(254)954-1289",
    "website": "demarco.info"
  },
  {
    "id": 6,
    "name": "Mrs. Dennis Schulist",
    "username": "Leopoldo_Corkery",
    "email": "Karley_Dach@jasper.info",
    "phone": "1-477-935-8478 x6430",
    "website": "ola.org"
  },
  {
    "id": 7,
    "name": "Kurtis Weissnat",
    "username": "Elwyn.Skiles",
    "email": "Telly.Hoeger@billy.biz",
    "phone": "210.067.6132",
    "website": "elvis.io"
  },
  {
    "id": 8,
    "name": "Nicholas Runolfsdottir V",
    "username": "Maxime_Nienow",
    "email": "Sherwood@rosamond.me",
    "phone": "586.493.6943 x140",
    "website": "jacynthe.com"
  },
  {
    "id": 9,
    "name": "Glenna Reichert",
    "username": "Delphine",
    "email": "Chaim_McDermott@dana.io",
    "phone": "(775)976-6794 x41206",
    "website": "conrad.com"
  },
  {
    "id": 10,
    "name": "Clementina DuBuque",
    "username": "Moriah.Stanton",
    "email": "Rey.Padberg@karina.biz",
    "phone": "024-648-3804",
    "website": "ambrose.net"
  }
]

First To fix this problem, create a file by the name of json-typings.d.ts in your application root directory and paste the code provided below into it.

declare module "*.json" {
    const value: any;
    export default value;
 }

Now we have created a JSON file with some fake user data. We will go to the application component file and paste the code below.

app.component.ts

import { Component, OnInit } from '@angular/core';
import sampleData from '../assets/data.json';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'ReaderJson';
  User :any = sampleData;
  listUser: User[] = [];
  ngOnInit(){
    console.log(this.User);
    this.listUser = this.User;
    for(let i= 0;i <this.listUser.length;i++){
      console.log(this.listUser[i].id +" " + this.listUser[i].name);
    }
  }
}

Can you create class object User

export class User{
  id: number;
  name: string;
  username: string;
  email: string;
  phone: string;
  website: string;
}

Your Angular 7 application is now ready to serve data from a local JSON file.

Go to app.component.html and paste the following code into it.

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <ul>
    <li *ngFor="let user of User">
      {{user.name}}
    </li>
  </ul>
  </div>

Can you download code at gitbuh