AngularJS factory http get JSON file

Question

I am looking to develop locally with just a hardcoded JSON file  My JSON file is as follows  valid when put into JSON validator           contentItem                                contentID     1                 contentVideo     file mov                contentThumbnail     url jpg                contentRating     5                contentTitle     Guitar Lessons                username     Username                 realname     Real name                contentTags                         tag     Guitar                       tag     Intermediate                       tag     Chords                                     contentAbout     Learn how to play guitar                 contentTime                                                                                                                                                         series                        seriesVideo     file mov    seriesThumbnail     url jpg    seriesTime     time    seriesNumber     1    seriesTitle     How to Play Guitar                        videoFile     file mov    seriesThumbnail     url jpg    seriesTime     time    seriesNumber     2    seriesTitle     How to Play Guitar                                           contentID     2                 contentVideo     file mov                contentThumbnail     url jpg                contentRating     5                contentTitle     Guitar Lessons                username     Username                 realname     Real name                contentTags                         tag     Guitar                       tag     Intermediate                       tag     Chords                                     contentAbout     Learn how to play guitar                 contentTime                                                                                                                                                         series                        seriesVideo     file mov    seriesThumbnail     url jpg    seriesTime     time    seriesNumber     1    seriesTitle     How to Play Guitar                        videoFile     file mov    seriesThumbnail     url jpg    seriesTime     time    seriesNumber     2    seriesTitle     How to Play Guitar                                      I ve gotten my controller  factory  and html working when the JSON was hardcoded inside the factory  However  now that I ve replaced the JSON with the  http get code  it doesn t work  I ve seen so many different examples of both  http and  resource but not sure where to go  I m looking for the simplest solution  I m just trying to pull data for ng-repeat and similar directives   Factory   theApp factory  mainInfoFactory   function  http         var mainInfo    http get  content json   success function response            return response data              var factory          define factory object     factory getMainInfo   function        define method on factory object         return mainInfo     returning data that was pulled in  http call            return factory     returning factory to make it ready to be pulled by the controller       Any and all help is appreciated  Thanks

User · Answer

This worked for me   It s vanilla javascirpt and good for use cases such as de-cluttering when testing with ngMocks library    lt  -- specRunner html - keep this at the top of your  lt script gt  asset loading so that it is available readily -- gt   lt  --  Frienly tip - have all JSON files in a json-data folder for keeping things organized-- gt   lt script src  json-data findByIdResults js  charset  utf-8  gt  lt  script gt   lt script src  json-data movieResults js  charset  utf-8  gt  lt  script gt    This is your javascript file that contains the JSON data      json-data JSONFindByIdResults js var JSONFindByIdResults           Title    Star Wars         Year    1983         Rated    N A         Released    01 May 1983         Runtime    N A         Genre    Action  Adventure  Sci-Fi         Director    N A         Writer    N A         Actors    Harrison Ford  Alec Guinness  Mark Hamill  James Earl Jones         Plot    N A         Language    English         Country    USA         Awards    N A         Poster    N A         Metascore    N A         imdbRating    7 9         imdbVotes    342         imdbID    tt0251413         Type    game         Response    True       Finally  work with the JSON data anywhere in your code     working with JSON data in code var findByIdResults   window JSONFindByIdResults    Note - This is great for testing and even karma conf js accepts these files for running tests as seen below   Also  I recommend this only for de-cluttering data and testing development environment      extract from karma conf js files          json-data JSONSearchResultHardcodedData js         json-data JSONFindByIdResults js               Hope this helps      Built on top of this answer https   stackoverflow com a 24378510 4742733  UPDATE  An easier way that worked for me is just include a function at the bottom of the code returning whatever JSON      within test code let movies   getMovieSearchJSON                          way down below in the code function getMovieSearchJSON           return             Title    Bri Squared             Year    2011             Rated    N A             Released    N A             Runtime    N A             Genre    Comedy             Director    Joy Gohring             Writer    Briana Lane             Actors    Brianne Davis  Briana Lane  Jorge Garcia  Gabriel Tigerman             Plot    N A             Language    English             Country    USA             Awards    N A             Poster    http   ia media-imdb com images M MV5BMjEzNDUxMDI4OV5BMl5BanBnXkFtZTcwMjE2MzczNQ    V1 SX300 jpg             Metascore    N A             imdbRating    8 2             imdbVotes    5             imdbID    tt1937109             Type    movie             Response    True

User · Answer

I wanted to note that the fourth part of Accepted Answer is wrong    theApp factory  mainInfo   function  http      var obj    content null     http get  content json   success function data           you can do some processing here     obj content   data           return obj            The above code as  Karl Zilles wrote will fail because obj will always be returned  before it receives data  thus the value will always be null  and this is because we are making an Asynchronous call    The details of similar questions are discussed in this post    In Angular  use  promise to deal with the fetched data when you want to make an asynchronous call   The simplest version is   theApp factory  mainInfo   function  http         return           get   function                 http get  content json       this will return a promise to controller                    and in controller  mainInfo get   then function response          scope foo   response data contentItem        The reason I don t use success and error is I just found out from the doc  these two methods are deprecated      The  http legacy promise methods success and error have been deprecated  Use the standard then method instead

User · Answer

Okay  here s a list of things to look into   1  If you re not running a webserver of any kind and just testing with file   index html  then you re probably running into same-origin policy issues   See   https   code google com archive p browsersec wikis Part2 wiki Same-origin policy  Many browsers don t allow locally hosted files to access other locally hosted files   Firefox does allow it  but only if the file you re loading is contained in the same folder as the html file  or a subfolder    2  The success function returned from  http get   already splits up the result object for you     http  method   GET   url    someUrl    success function data  status  headers  config      So it s redundant to call success with function response  and return response data   3  The success function does not return the result of the function you pass it  so this does not do what you think it does   var mainInfo    http get  content json   success function response            return response data            This is closer to what you intended   var mainInfo   null   http get  content json   success function data        mainInfo   data        4  But what you really want to do is return a reference to an object with a property that will be populated when the data loads  so something like this   theApp factory  mainInfo   function  http          var obj    content null         http get  content json   success function data               you can do some processing here         obj content   data                   return obj            mainInfo content will start off null  and when the data loads  it will point at it   Alternatively you can return the actual promise the  http get returns and use that   theApp factory  mainInfo   function  http         return  http get  content json          And then you can use the value asynchronously in calculations in a controller    scope foo    Hello World   mainInfo success function data          scope foo    Hello   data contentItem 0  username

User · Answer

I have approximately these problem  I need debug AngularJs application from Visual Studio 2013   By default IIS Express restricted access to local files  like json    But  first  JSON have JavaScript syntax   Second  javascript files is allowed   So    rename JSON to JS  data json- gt data js   correct load command   http get  App data js   success function  data       load script data js to page   lt script src  App data js  gt  lt  script gt     Next use loaded data an usual manner  It is just workaround  of course

User · Answer

this answer helped me out a lot and pointed me in the right direction but what worked for me  and hopefully others  is   menuApp controller  dynamicMenuController   function  scope   http     scope appetizers       http get  config menu json   success function data         console log  success          scope appetizers   data appetizers          console log data appetizers

[json] AngularJS: factory $http.get JSON file

Examples related to json

Examples related to http

Examples related to angularjs

Examples related to factory