Load json from local file with http get in angular 2

Question

I m trying to load a local json with http get   in angular 2  I tried something  that I found here on stack  It looks like this   this is my app module ts where I import the HttpModule and the JsonModule from  angular http   import   BrowserModule   from   angular platform-browser   import   NgModule   from   angular core   import   FormsModule   from   angular forms   import   HttpModule  JsonpModule   from   angular http   import   RouterModule  Routes   from   angular router    import   AppComponent   from    app component   import   NavCompComponent   from    nav-comp nav-comp component   import   NavItemCompComponent   from    nav-comp nav-item-comp nav-item-comp component      NgModule       declarations            AppComponent          NavCompComponent          NavItemCompComponent            imports            BrowserModule          FormsModule          HttpModule          JsonpModule          RouterModule forRoot appRoutes             providers          bootstrap   AppComponent      export class AppModule       In my component I import Http and Response from  angular http  Then I have a function called loadNavItems    where I try to load my json with relative path using http get   and print the result with console log    The function is called in ngOnInit     import   Component  OnInit   from   angular core   import   Http  Response   from   angular http     Component       selector   app-nav-comp       templateUrl     nav-comp component html       styleUrls      nav-comp component scss      export class NavCompComponent implements OnInit        navItems  any       constructor private http  Http           ngOnInit             this loadNavItems               loadNavItems             this navItems   this http get     data navItems json            console log this navItems             My local json file looks like this               id   1           name    Home            routerLink     home-comp                        id   2           name     amp Uuml ber uns            routerLink     about-us-comp                        id   3           name    Events            routerLink     events-comp                        id   4           name    Galerie            routerLink     galery-comp                        id   5           name    Sponsoren            routerLink     sponsoring-comp                        id   6           name    Kontakt            routerLink     contact-comp            There are no errors in the console  I just get this output   In my html template I would like to loop the items like this    lt app-nav-item-comp  ngFor  let item of navItems   item   item  gt  lt  app-nav-item-comp gt    I made this with a solution I found here on stack  but I have no idea why it doesn t work   EDIT RELATIVE PATH  I also get a problem with my relative path  but I m sure it s the right one when I use    data navItems json  In the screenshot you can se the nav-comp component ts  where I load the json using relative path from the json file which is in the folder called data  What s wrong  the console prints an 404 error  because it can t find my json file from the relative path

User · Answer

I you want to put the response of the request in the navItems. Because http.get() return an observable you will have to subscribe to it.

Look at this example:

_x000D_

// version without map_x000D_
this.http.get("../data/navItems.json")_x000D_
    .subscribe((success) => {_x000D_
      this.navItems = success.json();          _x000D_
    });_x000D_
_x000D_
// with map_x000D_
import 'rxjs/add/operator/map'_x000D_
this.http.get("../data/navItems.json")_x000D_
    .map((data) => {_x000D_
      return data.json();_x000D_
    })_x000D_
    .subscribe((success) => {_x000D_
      this.navItems = success;          _x000D_
    });

_x000D_

User · Answer

You have to change   loadNavItems             this navItems   this http get     data navItems json            console log this navItems           for   loadNavItems             this navItems   this http get     data navItems json                            map res   gt  res json                             do data   gt  console log data                              This is optional  you can remove the last line                             if you don t want to log loaded json in                             console          Because this http get returns an Observable lt Response gt  and you don t want the response  you want its content   The console log shows you an observable  which is correct because navItems contains an Observable lt Response gt    In order to get data properly in your template  you should use async pipe    lt app-nav-item-comp  ngFor  let item of navItems   async   item   item  gt  lt  app-nav-item-comp gt    This should work well  for more informations  please refer to HTTP Client documentation

User · Answer

I found that the simplest way to achieve this is by adding the file json under folder  assets    No need to edit   angular-cli json  Service   Injectable   export class DataService     getJsonData    Promise lt any   gt       return this http get lt any   gt   http   localhost 4200 assets data json   toPromise            Component  private data  any     constructor private dataService  DataService      ngOnInit         data           this dataService getJsonData          then  result   gt            console log  ALL Data     result           data   result                  catch  error   gt            console log  Error Getting Data     error                   Extra   Ideally  you only want to have this in a dev environment so to be bulletproof  create a variable on your environment ts  export const environment       production  false    baseAPIUrl   http   localhost 4200 assets data json       Then replace the URL on the http get for   environment baseAPIUrl   And the environment prod ts can have the production API URL   Hope this helps

User · Answer

If you are using Angular CLI  7 3 3 What I did is  On my assets folder I put my fake json data then on my services I just did this   const API URL      assets data db json    getAllPassengers    Observable lt PassengersInt   gt        return this http get lt PassengersInt   gt  API URL

User · Answer

try   this navItems   this http get  data navItems json

User · Answer

For Angular 5  only preform steps 1 and 4     In order to access your file locally in Angular 2  you should do the following  4 steps     1  Inside your assets folder create a  json file  example  data json   2  Go to your angular cli json  angular json in Angular 6   inside your project and inside the assets array put another object  after the package json object  like this      glob    data json    input          output      assets      full example from angular cli json   apps                  root    src          outDir    dist          assets              assets            favicon ico              glob    package json    input           output      assets                 glob    data json    input          output      assets                Remember  data json is just the example file we ve previously added in the assets folder  you can name your file whatever you want to    3  Try to access your file via localhost  It should be visible within this address  http   localhost your port assets data json  If it s not visible then you ve done something incorrectly  Make sure you can access it by typing it in the URL field in your browser before proceeding to step  4    4  Now preform a GET request to retrieve your  json file  you ve got your full path  json URL and it should be simple    constructor private http  HttpClient                Make the HTTP request          this http get  http   localhost port assets data json                     subscribe data   gt  console log data

User · Answer

MY OWN SOLUTION  I created a new component called test in this folder     I also created a mock called test json in the assests folder created by angular cli  important      This mock looks like this                            id   1               name    Item 1                                    id   2               name    Item 2                                    id   3               name    Item 3                In the controller of my component test import follow rxjs like this   import  rxjs add operator map    This is important  because you have to map your response from the http get call  so you get a json and can loop it in your ngFor  Here is my code how I load the mock data  I used http get and called my path to the mock with this path this http get   assets mock test test json    After this i map the response and subscribe it  Then I assign it to my variable items and loop it with ngFor in my template  I also export the type  Here is my whole controller code   import   Component  OnInit   from   angular core   import   Http  Response   from   angular http   import  rxjs add operator map   export type Item     id  number  name  string      Component     selector   test     templateUrl     test component html     styleUrls      test component scss      export class TestComponent implements OnInit     items  Array lt Item gt      constructor private http  Http        ngOnInit         this http        get   assets mock test test json          map data   gt  data json   as Array lt Item gt          subscribe data   gt            this items   data          console log data                     And my loop in it s template    lt div  ngFor  let item of items  gt      item name    lt  div gt    It works as expected  I can now add more mock files in the assests folder and just change the path to get it as json  Notice that you have also to import the HTTP and Response in your controller  The same in you app module ts  main  like this   import   BrowserModule   from   angular platform-browser   import   NgModule   from   angular core   import   HttpModule  JsonpModule   from   angular http     import   AppComponent   from    app component   import   TestComponent   from    components molecules test test component      NgModule     declarations        AppComponent      TestComponent        imports        BrowserModule      HttpModule      JsonpModule        providers        bootstrap   AppComponent     export class AppModule

[javascript] Load json from local file with http.get() in angular 2

Examples related to javascript

Examples related to html

Examples related to json

Examples related to angular

Examples related to http