Angular4: how do access local json?

Question

In Angular2 you could have a folder /data/ and a json file there and you could access it at localhost:4200/data/something.json.

This is no longer possible in Angular4.

Any ideea how to get it to work?

@AurA see here what is angular2 now http://stackoverflow.com/a/43224781/5043867 ;) — Pardeep Jain, Apr 07 '17 at 10:43

score 14 · Accepted Answer · edited May 23 '17 at 12:25

14

you can use this code

@Injectable()
export class AppServices{

    constructor(private http: Http) {
         var obj;
         this.getJSON().subscribe(data => obj=data, error => console.log(error));
    }

    public getJSON(): Observable<any> {
         return this.http.get("./file.json")
                         .map((res:any) => res.json())
                         .catch((error:any) => console.log(error));

     }
}

here file.json is your local json file.

see here also

How to get a json file in angular2 using the Http class

also see the changlog of angular-cli for path

https://github.com/angular/angular-cli/blob/master/CHANGELOG.md#100-rc4-2017-03-20

edited May 23 '17 at 12:25

Community

1
1

answered Apr 07 '17 at 10:39

Pardeep Jain

84,110
37
165
215

This is what i used to do in Angular2. In Angular4 the route ./file.json no longer works. – Dan Neciu Apr 07 '17 at 10:42
@DanNeciu also see my Updated answer – Pardeep Jain Apr 07 '17 at 10:52
1

that's why frameworks suck, all this just to open file, it may be easier to do it with actual code interfacing with the file system itself – aero Sep 19 '18 at 22:23
@Preadeep. import * as data from './example.json'; or subscribing .json from local assets which one is preferred and why to subscribe if we can import directly? – Mahi Jan 18 '19 at 18:08
@Mahi IMO Both are different ways to access local JSON data in your project, you can choose either. Offcourse If we can access directly without HTTP call simple import would be a more good idea. and to get data from observable you need to subscribe I guess but yes you can omit `.map` from here. – Pardeep Jain Jan 19 '19 at 14:39

score 8 · Answer 2 · edited Feb 13 '18 at 15:58

8

Ofcourse its possible. Let's assume here is your json file

And here is your code to call the json

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map'

@Injectable()
export class YourService {

   constructor(private http: Http) { }

   getAdvantageData(){
      let apiUrl = './assets/data/api/advantage.json';
      return this.http.get(apiUrl)
      .map( (response: Response) => {
         const data = response.json();
         return data;
      });
   }  
}

edited Feb 13 '18 at 15:58

Tienus McVinger

467
9
24

answered Aug 10 '17 at 15:17

Vivek Shukla

711
9
18

What module should be imported in app module after this? – vkg Nov 08 '17 at 02:15
@veerendragupta I didn't get your question completely. Please elaborate a little. – Vivek Shukla Nov 08 '17 at 07:38

score 7 · Answer 3 · edited Sep 15 '19 at 17:59

7

I was facing the same issue, where my Observable Angular service was located at inside 'src/app/' folder and it was trying to load a local JSON file. I tried to put the JSON file inside the same app folder, inside a new 'api' folder, used various kinds of relatives/absolute routes, but it didn't help and I got 404 error. The moment I put it inside 'assets' folder, it worked. I guess there is more to it?

Maybe this link helps:

COMPONENT-RELATIVE PATHS IN ANGULAR

edited Sep 15 '19 at 17:59

halfer

19,824
17
99
186

answered Oct 04 '17 at 16:13

Deepak Pathak

626
1
9
19

1

I think webpack, the module bundler, bundles by default everything from assets folder. – Deepak Pathak Oct 29 '17 at 17:15
It's because of everything specified in the `assets` array in `angular-cli.json` gets copied and served, thus being available in the runtime. See https://github.com/angular/angular-cli/wiki/stories-asset-configuration – Nerman Mar 08 '18 at 22:36

score 7 · Answer 4 · answered Nov 30 '17 at 13:32

7

You can use "require" too;

let test = require('./test.json');

answered Nov 30 '17 at 13:32

yazantahhan

2,950
1
13
16

Can you please let me know how can we use ''require" in angular project ? – Darshana Sep 14 '20 at 13:58

Benjamin Caure · Answer 5 · 2018-06-26T10:47:18.810

Based on this post, here is complete answer for Angular 6+:

From angular-cli doc, json can be considered as assets and accessed from standard import without use of ajax request.

Let's suppose you add your json files into "your-json-dir" directory:

add "your-json-dir" into angular.json file (:

"assets": [ "src/assets", "src/your-json-dir" ]
allow import of json modules into typings.d.ts file to prevent from typescript errors:

declare module "*.json" { const value: any; export default value; }
in your controller/service/anything else file, simply import the file by using this relative path:

import * as myJson from 'your-json-dir/your-json-file.json';

score 0 · Answer 6 · answered Apr 07 '17 at 10:44

0

I figured it out.

In Angular2 I had the folder under the src folder. In Angular4 you have to have it in the root folder.

Example:

Angular2:

root / src / data / file.json

Angular4:

root / data / file.json

answered Apr 07 '17 at 10:44

Dan Neciu

208
1
2
9

You can place file wherever you want, just as you use the whole path, not relative paths in your request :) – AT82 Apr 07 '17 at 11:06

score 0 · Answer 7 · answered Sep 02 '18 at 12:22

0

You could add your folder location under Assets tag in angular.json

"assets": [
          "src/favicon.ico",
          "src/assets",
          "src/api"
        ],

answered Sep 02 '18 at 12:22

deathrace

908
4
22
48

Angular4: how do access local json?

7 Answers7

Linked