Angular

How To Read a JSON File From Assets in Angular

3 ways to read a JSON file from the assets folder in Angular

Example available at https://jsonplaceholder.typicode.com/. You can use https://jsoneditoronline.org/ to experiment with JSON data.

While working on a side project, I wanted to read data from a local JSON file in my assets folder.

It turns out there are at least a couple of ways to do it. I will mention the most common ones, but you can find a few more below:

1. Using the import statement
2. Using Angular HttpClient

Read a JSON File From Assets in Angular

1. Using the import statement

One way to read a JSON file from the assets folder in Angular is to use the import statement in your component.

If you are learning Angular and didn’t meet HttpClient yet, this is the easiest way. Or at least, the one that doesn’t introduce new concepts.

Since I want to read a JSON file from the assets folder in my app.component.ts file, I use the import as follows:

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

This is almost enough. You need to add "resolveJsonModule": true in the compilerOptions of your tsconfig.json file that is at the root of your Angular application.

Here is a simplified example of tsconfig.json:

// tsconfig.json
{
  "compileOnSave": false,
  "compilerOptions": {
    ...
    "resolveJsonModule": true,
    ...
 },
  "angularCompilerOptions": {
  ...
 }
}

In some cases, this is not enough and you might need to set esModuleInterop to true as well. In my case, it was not necessary.

Eventually, AppComponent will look like this:

Here is a screenshot of my console:

Console.log of data.json

This assumes you have a data.json file in the src/assets folder of your project.

2. Using Angular HttpClient

Another way to read a JSON file from the assets folder in Angular is to use the HttpClient module.

First, we need to import the HttpClientModule in app.module.ts.

Second, we need to import HttpClient in app.component.ts and inject it in the constructor to expose it for use in the component.

Finally, we can use the get method to obtain data from the file.

this.httpClient.get(this.URL).subscribe(console.log);

In this case, we simply subscribe to the Observable generated by Angular HttpClient and log the data in the console.

This way of working might be less intuitive for beginners because it introduces two new concepts:

• HttpClient
• RxJS and Observable/subscribe pattern

However, applications usually connect to the server via the HTTP protocol. Therefore, soon or later you will learn about those concepts.

Be aware that it is a good practice to isolate asynchronous effects from components. In other words, you don’t want to have an HTTP request inside your component.

You should have it in a service, for example. This is omitted for simplicity.

Finally, here is what AppComponent looks like:

Needless to say, the log is very similar to the previous one. Here’s what it looks like:

Console.log of data.json

If you feel this is a bit overwhelming, read the section Use the Fetch API.

It is possible to read a JSON file by using the native Fetch API. This will remove some of the complexity related to RxJS and the HttpClient module.

3. Other ways to read a JSON file from assets in Angular

There are a few other ways to read a JSON file from the assets folder in Angular.

I won’t go into details because they are less likely to be used, however, it is worth mentioning.

3.1 Add a typing file — json-typings.d.ts

This seems to work when you get errors when both resolveJsonModule and esModuleInterop are set to true in tsconfig.json.

If this is the case, you will have to declare the JSON module within a file named json-typings.d.ts in the app folder.

//  json-typings.d.ts
declare module "*.json" {
    const value: any;
    export default value;
}

3.2 Use the fetch API

We can also read JSON files using the native Fetch API, which is available in all browsers.

In this case, your code will look like this:

// app.component.ts
ngOnInit(): void {
    fetch('./assets/data.json').then(res => res.json())
    .then(console.log); // do something with data
}

3.3 Use Angular JsonPipe

This is good to know, even if it is not a way to read data from a JSON file.

JsonPipe comes directly from Angular and it converts a value into its JSON-format representation. The value has to be in a property and not in a JSON file in assets.

Therefore, you should first assign the object in the JSON file to a property using any one of the ways above.

Once you do that, you can use JsonPipe as follows:

<p>{{ data | json}}</p>

I would suggest using the <pre> tags to make the outcome prettier.

<pre>{{ data | json}}</pre>

<pre>{{ data | json}}</pre>

As reported in the documentation, this is mainly used for debugging purposes.

If you are learning Angular, you might be interested in this simple tutorial:

Angular Tutorial - 2023 - vitainbeta

Let's Keep In Touch