Import & Read Local JSON Files in Angular 7/8 and TypeScript 2.9+

In this tutorial, we'll see by example how to import and read local JSON files in Angular 8 applications and TypeScript 2.9+.

There are various ways to read local JSON files but in this example we'll see how to use the import statement to import a local JSON file just like any TypeScript module which is a supported feature in TypeScript 2.9+.

Angular added support for TypeScript 2.9+ from v6.1+.

In TypeScript 2.9+, we can use the resolveJsonModule configuration option in the tsconfig.json file to enable importing local JSON files just like modules. Let's see this step by step.

Step 1 - Preparing your Angular 8 Project

You should create an Angular 8 project using Angular CLI.

Step 2 - Configuring the TypeScript Compiler

Next, let's start by configuring the TypeScript compiler to enable importing local JSON files. Open the tsconfig.json file and add the "resolveJsonModule": true configuration option under the compilerOptions key:

{
  "compileOnSave": false,
  "compilerOptions": {
    ...
    "resolveJsonModule": true,
    ...
}

Step 3 - Creating a Local JSON File

Next, let's create a local JSON file in our Angular project's folder. In the src/app folder, create a data.json file and the following data:

[
    {
        "id": 1,
        "name": "Licensed Frozen Hat",
        "description": "Incidunt et magni est ut.",
        "price": "170.00",
        "imageUrl": "https://source.unsplash.com/1600x900/?product",
        "quantity": 56840
    },
    {
        "id": 2,
        "name": "Rustic Concrete Chicken",
        "description": "Sint libero mollitia.",
        "price": "302.00",
        "imageUrl": "https://source.unsplash.com/1600x900/?product",
        "quantity": 9358
    },
    {
        "id": 3,
        "name": "Fantastic Metal Computer",
        "description": "In consequuntur cupiditate et unde minus.",
        "price": "279.00",
        "imageUrl": "https://source.unsplash.com/1600x900/?product",
        "quantity": 90316
    }
]

Next, let's see how to import the JSON data in this file in our Angular component.

Step 4 - Importing the JSON File

Open the src/app/app.component.ts flle and add the following import statement:

import  *  as  data  from  './data.json';

Next, let's display the data object in the console:

  ngOnInit(){
    console.log(data);

  }

This is a screenshot of the console:

We can that our data resides in a default array. Next, define a variable in your component and assign the JSON data to it as follows:

products:  any  = (data  as  any).default;

This is the code of the full component:

import { Component, OnInit } from '@angular/core';
import * as data from './data.json';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Angular Example';

  products: any = (data as any).default;

  constructor(){}
  ngOnInit(){
    console.log(data);
  }
}

Step 5 - Displaying the JSON Data

Finally, open the src/app/app.component.html file and add the following code:

[% raw %} ```html

``` [% endraw %}

Conclusion

In this quick example, we've seen how to use the import statement in TypeScript 2.9+ to import and load local JSON files in our Angular 8 apps. This feature is enabled using the "resolveJsonModule": true configuration option under the compilerOptions key of the tsconfig.json file - The TypeScript compiler's configuration file.

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status