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.

Recommended for you

Angular2 Tutorial: Creating Awesome Animated Charts with Highcharts Highcharts with Angular2 Today I'm going to show you how you can add some really amazing animated charts to your Angular 2 application. We're going to use a very rich library called Highcharts, it provides a huge variety of charts that you can use on your app. Seriously, they probably have any t...
Interacting with Child Components in Angular2 There are lots of situations where we have to divide a component into several sub-components, resulting in a parent with N child components that somehow have to interact with the parent, like for example a menu component like this: In this case the menu-componen...
Angular2 Error: Can’t bind to ‘ngModel’ since it isn’t a known property of &... Lots of people are having this problem since Angular2 introduced NgModule, this error occurs when you try to use something from an specific module without importing it, this is how the error looks on the console: zone.js:355 Unhandled Promise rejection: Template parse errors: Can't bind to 'ng...
Tutorial: Angular 2 Datatable with Sorting, Filtering and Resizable Columns In this tutorial I'm going to show you one of the datatable solutions available for Angular 2, it's called ag-Grid and it's available not only for angular2, but also for other frameworks like Angular 1 and React. It's a really complete datatable, it has lots of features that I definitely want to exp...

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

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>