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';
 
@NgModule({
  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';
 
@Component({
  selector: 'my-app',
  template: ``,
})
export class AppComponent { 
 
    data;
 
    constructor(private http:Http) {
        this.http.get('data/data.json')
                .subscribe(res => this.data = 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.

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

  1. Gaurav Pandvia

    Hi,
    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

    Hi.
    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": [
            "assets",
            "favicon.ico",
            "data"
          ],
          "index": "index.html",
          "main": "main.ts",

Leave a Reply to Gaurav Pandvia Cancel 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>