How to Load a JSON file in Angular2

Angular2 makes it very easy for us to load data from JSON files, we can do it by simply making a http request. Now let’s see how we can do that.

To be able to make Http requests we first have to import the HttpModule on the app.module.ts, once you’ve done that your code should look like this:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule }      from '@angular/http';
import { AppComponent }   from './app.component';
  imports:      [ BrowserModule, HttpModule ],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ]
export class AppModule { }

Next you have put your JSON file in a location accessible via Http, you can put it directly on the root folder of your project if you want, I’m going to create a new folder called /data to keep the files organized.

Now you can load you file using http.get() like I did in the constructor:

import {Http} from '@angular/http';
import { Component } from '@angular/core';
  selector: 'my-app',
  template: ``,
export class AppComponent { 
    constructor(private http:Http) {
                .subscribe(res => = res.json());

Note that I’ve used the subscribe() function here, it receives another function responsible for handling the response, in this case I’m just assigning it the the data variable.

Very simple, right? I’ve used Angular 2.0.0-rc.6 version for this tutorial, if you are using a different version this may not work for you.

Recommended for you

Angular2 Forms Tutorial: Creating Custom Validators Every now and then developers come across situations where existing validators are not suitable for their needs, if you are facing this situation your best option is to create a custom validatior, to illustrate how you can do that in angular2 I'm going to create a simple custom validator that will v...
How to Load a JSON file in Javascript In this post I'm going to give you a very simple example of how to read a JSON file and display the data on the page. I'll be using jQuery in this example, so if you don't have it on your project don't forget to add the script. So let's get started, first we need a JSON, you probably already have...
Creating an Angular2 Image Gallery In order to make this tutorial easier for beginners I'm going to start by creating the simplest possible gallery, from there I'm going to develop and add more functionalities to it, which will increasingly make the gallery more complex as we proceed. If you are already familiar and have some experie...
Angular2 Forms Tutorial: Validating Required Fields Angular2 Form Validation In this tutorial I'll give you a simple example of how to validate a form with angular2. As you can see in the image, the example consists of a form with two required fields, the form can only be submitted if both fields are valid. I'm going to use bootstrap for styli...

12 comments on “How to Load a JSON file in Angular2

  1. Gaurav Pandvia

    I am trying to load a json file ussing http.get request but I am getting 404 not found for that json file . My json file is in this kind of folder structure is /src/app/app1/component1/data.json. My component or module file from where I am making the call is also in the same folder and I have tried providing the following path also but it still fails . Also I have set in the head. Can that be a problem?
    Please help , stuck on this for a long time now.

  2. Sudda Vargn

    The example works of data.json is read from AppComponent. However I get 404: Resource Not Found error when trying to read from another Component which is child of AppComponent.

    How is the resource path resolved from any given Component ?

    1. Ammar Alaya

      to communicate between Components you can use @Input() /@Output() declaration .. you would be able to access data from Parent and child component

  3. Pradana

    Thank you dude, it’s helping so far…
    I have problem put user.json on src/data/user.json
    But after I move it to src/assets/data/user.json it’s work well

  4. Fabien

    While you are using Angular CLI, you need to include the data.json in your deployment to avoid 404.
    Instead of move the file in assets folder, you can simply edit your .angular-cli.json file, and add data.json in your assets array.

  5. yogesh

    To fix the error, add “data” in assets array of the angular-cli.json file.

    The part of snapshot of the angular-cli.json file after adding data folder in assets array it will look like.

      "apps": [
          "root": "src",
          "outDir": "dist",
          "assets": [
          "index": "index.html",
          "main": "main.ts",
  6. Bohdan

    Thank you so much. For this If you are using angular cli, try to put your file to ‘src/assets/data.json’
    It should be working. It help me.

  7. Lavanya

    How to do this in Angular 6?
    In Angular 6, I tried doing that with HttpClient bit the JSON file is not loading. Please help.

Leave a Reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>