How to fetch JSON file in Angular 2

Question

as I am new to the Angular  can anyone please give a simple solution on loading the JSON file data using angular 2   My code is like below  Index html    x000D   x000D   lt html gt  x000D     lt head gt  x000D       lt title gt Angular 2 QuickStart lt  title gt  x000D       lt meta charset  UTF-8  gt  x000D       lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D       lt link rel  stylesheet  href  css styles css  gt  x000D       lt  -- 1  Load libraries -- gt  x000D        lt  -- Polyfill s  for older browsers -- gt  x000D       lt script src  node modules core-js client shim min js  gt  lt  script gt  x000D       lt script src  node modules zone js dist zone js  gt  lt  script gt  x000D       lt script src  node modules reflect-metadata Reflect js  gt  lt  script gt  x000D       lt script src  node modules systemjs dist system src js  gt  lt  script gt  x000D       lt  -- 2  Configure SystemJS -- gt  x000D       lt script src  systemjs config js  gt  lt  script gt  x000D       lt script gt  x000D        System import  app   catch function err   console error err       x000D       lt  script gt  x000D     lt  head gt  x000D     lt  -- 3  Display the application -- gt  x000D     lt body gt  x000D       lt my-app gt Loading    lt  my-app gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    app component ts   x000D   x000D  import  Component  from   angular core   x000D     x000D   Component   x000D    selector   my-app   x000D    template    x000D             lt div id  main  gt  x000D              Main Div x000D                  lt div id    header  gt  lt  div gt  x000D                  lt div id    content  gt  x000D                     lt ul class  games  gt  x000D                         lt li gt  x000D              x000D                         lt  li gt  x000D                     lt  ul gt  x000D                  lt  div gt  x000D             lt  div gt  x000D         x000D     x000D  export class AppComponent   x000D     x000D   x000D   x000D    games json  x000D   x000D    x000D    games    x000D      x000D      title   Primary Operations   x000D      enabled  true x000D       x000D      x000D      title   Curated Games   x000D      enabled  false x000D      x000D     x000D    x000D   x000D   x000D    I want to fetch all games from games json into li at app component ts Please advise in detail

User · Answer

You need to make an HTTP call to your games json to retrieve it  Something like   this http get   app resources games json  map

User · Answer

You don t need HttpClient  you don t even need Angular  All you need is WebPack and JSON-Loader  both are already part of Angular-CLI    All the code you need is this line   import   as someName from    somePath someFile json    And the your json-data can be found under someName default  However this code will throw a type-error from the TypeScript compiler - this isn t a real error  but only a type-error   To solve it add this code to your src typings d ts file  if it doesn t exist create it    declare module    json      const value  any    export default value      Please notice  that working in this method will compile your json  minify uglify  into the app bundle at build time  This mean that you won t need to wait until this file will load - as you will if you choice to work with httpClient get      - meaning faster application

User · Answer

I needed to load the settings file synchronously  and this was my solution   export function InitConfig config  AppConfig    return      gt  config load       import   Injectable   from   angular core     Injectable   export class AppConfig       Settings  ISettings       constructor            load             return new Promise  resolve    gt                this Settings   this httpGet  assets clientsettings json                resolve true                          httpGet theUrl   ISettings           const xmlHttp   new XMLHttpRequest            xmlHttp open   GET   theUrl  false       false for synchronous request         xmlHttp send  null            return JSON parse xmlHttp responseText             This is then provided as a app initializer which is loaded before the rest of the application    app module ts          provide  APP INITIALIZER        useFactory  InitConfig        deps   AppConfig         multi  true

User · Answer

If you using angular-cli Keep the json file inside Assets folder  parallel to app dir  directory  return this http get   lt json file path inside assets folder gt  json         map  response  Response    gt            console log  mock data    response json             return response json                     catch this handleError       Note  here you only need to give path inside assets folder like assets json oldjson json then you need to write path like  json oldjson json   If you using webpack then you need to follow above same structure inside public folder its similar like assets folder

User · Answer

x000D   x000D  public init     x000D      return from  x000D        fetch  assets server-config json   then response   gt    x000D          return response json    x000D           x000D        x000D         pipe  x000D          map config   gt    x000D            return config  x000D             x000D          x000D         toPromise    x000D      x000D   x000D   x000D

User · Answer

For example  in your component before you declare your  Component  const en   require     assets en json

User · Answer

i think the assets folder is public  you can access it directly on the browser  http   localhost 4020 assets   unlike other privates folders  drop your json file in the assets folder

User · Answer

Here is a part of my code that parse JSON  it may be helpful for you   import   Component  Input   from   angular core   import   Injectable       from   angular core   import   Http  Response  Headers  RequestOptions   from   angular http   import  Observable  from  rxjs Rx   import  rxjs add operator map   import  rxjs add operator catch     Injectable   export class AppServices       constructor private http  Http             var obj           this getJSON   subscribe data   gt  obj data  error   gt  console log error               public getJSON    Observable lt any gt             return this http get    file json                             map  res any    gt  res json                              catch  error any    gt  console log error

User · Answer

In Angular 5  you can just say   this http get lt Example gt   assets example json     This will give you Observable lt Example gt

User · Answer

Keep the json file in Assets  parallel to app dir  directory  Note that if you would have generated with ng new YourAppname- this assets directory exists same line with  app  directory  and services should be child directory of app directory  May look like as below     app services myservice ts  getOrderSummary    Observable          get users from api     return this http get  assets ordersummary json      options           map  response  Response    gt                console log  mock data    response json                 return response json                         catch this handleError

User · Answer

service service ts --------------------------------------------------------------  import   Injectable   from   angular core   import   Http Response  from   angular http   import   Observable   from  rxjs   import  rxjs add operator map     Injectable     providedIn   root     export class ServiceService    private url  some URL    constructor private http Http              getData   is a method to fetch the data from web api or json file  getData               getData              return this http get this url               map  response Response   gt response json                                  display component ts --------------------------------------------     In this component get the data using suscribe   and store it in local object as dataObject and display the data in display component html like   dataObject  propertyName      import   Component  OnInit   from   angular core   import   ServiceService   from  src app service service     Component     selector   app-display     templateUrl     display component html     styleUrls      display component css      export class DisplayComponent implements OnInit         dataObject  any     constructor private service ServiceService         ngOnInit         this service getData          subscribe resData  gt this dataObject  resData

[json] How to fetch JSON file in Angular 2

Examples related to json

Examples related to angular