Loading local JSON file

Question

I m trying to load a local JSON file but it won t work  Here is my JavaScript code  using jQuery   var json     getJSON  quot test json quot    var data   eval  quot   quot   json responseText    quot   quot    document write data  quot a quot      The test json file    quot a quot     quot b quot    quot c quot     quot d quot    Nothing is displayed and Firebug tells me that data is undefined  In Firebug I can see json responseText and it is good and valid  but it s strange when I copy the line   var data   eval  quot   quot   json responseText    quot   quot     in Firebug s console  it works and I can access data  Does anyone have a solution

User · Answer

I had the same need  to test my angularjs app   and the only way I found is to use require js  var json   require    data json       with path   note  the file is loaded once  further calls will use the cache  More on reading files with nodejs  http   docs nodejitsu com articles file-system how-to-read-files-in-nodejs require js  http   requirejs org

User · Answer

function readTextFile srcfile            try     this is for IE             var fso   new ActiveXObject  Scripting FileSystemObject                 if  fso FileExists srcfile                     var fileReader   fso OpenTextFile srcfile  1                   var line   fileReader ReadLine                    var jsonOutput   JSON parse line                             catch  e                  readTextFile  C   Users  someuser  json txt      What I did was  first of all  from network tab  record the network traffic for the service  and from response body  copy and save the json object in a local file  Then call the function with the local file name  you should be able to see the json object in jsonOutout above

User · Answer

What worked for me is the following   Input    http   ip address  some folder name  render output html relative path to json fie json   Javascript Code     lt html gt   lt head gt    lt style gt  pre     string   color  green     number   color  darkorange     boolean   color  blue     null   color  magenta     key   color  red     lt  style gt    lt script gt  function output inp        document body appendChild document createElement  pre    innerHTML   inp     function gethtmlcontents        path   window location search substr 1      var rawFile   new XMLHttpRequest        var my file   rawFile open  GET   path  true      Synchronous File Read       alert  Starting to read text       rawFile onreadystatechange   function                    alert  I am here            if rawFile readyState     4                        if rawFile status     200    rawFile status    0                                var allText   rawFile responseText                    alert allText                  var json format   JSON stringify JSON parse allText   null  8                    output json format                  output syntaxHighlight json format                                      rawFile send null      function syntaxHighlight json        json   json replace   amp  g    amp amp    replace   lt  g    amp lt    replace   gt  g    amp gt         return json replace       u a-zA-Z0-9  4      u             s      b true false null  b -  d       d       eE    -   d     g  function  match            var cls    number           if       test match                 if       test match                     cls    key                 else                   cls    string                           else if   true false  test match                 cls    boolean             else if   null  test match                 cls    null                     return   lt span class      cls      gt     match     lt  span gt               gethtmlcontents     lt  script gt   lt  head gt   lt body gt   lt  body gt   lt  html gt

User · Answer

x000D   x000D  json str   String raw    name    Jeeva      name    Kumar      x000D  obj   JSON parse json str   x000D   x000D  console log obj 0   name     x000D   x000D   x000D    I did this for my cordova app  like I created a new javascript file for the JSON and pasted the JSON data into String raw then parse it with JSON parse

User · Answer

In TypeScript you can use import to load local JSON files  For example loading a font json   import   as fontJson from        public fonts font name json     This requires a tsconfig flag --resolveJsonModule      tsconfig json         compilerOptions              module    commonjs            resolveJsonModule   true           esModuleInterop   true           For more information  see the release notes of typescript  https   www typescriptlang org docs handbook release-notes typescript-2-9 html

User · Answer

If you re looking for something quick and dirty just load the data in the head of your HTML document   data js  var DATA     a     b    c     d      index html   lt html gt   lt head gt      lt script src  data js   gt  lt  script gt      lt script src  main js   gt  lt  script gt   lt  head gt       lt  html gt    main js   function       console log DATA        a     b    c     d           I should mention that your heap size  in Chrome  is about 4GBs  so if your data is larger than that you should find another method  If you want to check another browser try this   window performance memory jsHeapSizeLimit   1024   1024   1024     GBs      4 046875 GBs

User · Answer

If you want to let the user select the local json file  anywhere on the filesystem   then the following solution works   It uses uses FileReader and JSON parser  and no jquery     lt html gt   lt body gt    lt form id  jsonFile  name  jsonFile  enctype  multipart form-data  method  post  gt      lt fieldset gt       lt h2 gt Json File lt  h2 gt        lt input type  file  id  fileinput  gt        lt input type  button  id  btnLoad  value  Load  onclick  loadFile     gt     lt  fieldset gt   lt  form gt     lt script type  text javascript  gt     function loadFile         var input  file  fr       if  typeof window FileReader      function           alert  The file API isn t supported on this browser yet           return             input   document getElementById  fileinput        if   input          alert  Um  couldn t find the fileinput element               else if   input files          alert  This browser doesn t seem to support the  files  property of file inputs               else if   input files 0           alert  Please select a file before clicking  Load               else         file   input files 0         fr   new FileReader          fr onload   receivedText        fr readAsText file              function receivedText e          let lines   e target result        var newArr   JSON parse lines               lt  script gt    lt  body gt   lt  html gt    Here is a good intro on FileReader  http   www html5rocks com en tutorials file dndfiles

User · Answer

An approach I like to use is to pad wrap the json with an object literal  and then save the file with a  jsonp file extension  This method also leaves your original json file  test json  unaltered  as you will be working with the new jsonp file  test jsonp  instead  The name on the wrapper can be anything  but it does need to be the same name as the callback function you use to process the jsonp  I ll use your test json posted as an example to show the jsonp wrapper addition for the  test jsonp  file   json callback   a     b    c     d       Next  create a reusable variable with global scope in your script to hold the returned JSON  This will make the returned JSON data available to all other functions in your script instead of just the callback function   var myJSON    Next comes a simple function to retrieve your json by script injection  Note that we can not use jQuery here to append the script to the document head  as IE does not support the jQuery  append method  The jQuery method commented out in the code below will work on other browsers that do support the  append method  It is included as a reference to show the difference   function getLocalJSON json url       var json script    document createElement  script        json script type    text javascript       json script src    json url      json script id      json script       document getElementsByTagName  head   0  appendChild json script             head   0  append json script   DOES NOT WORK in IE   append method not supported      Next is a short and simple callback function  with the same name as the jsonp wrapper  to get the json results data into the global variable   function json callback response       myJSON   response                Clone response JSON to myJSON object         json script   remove         Remove json script from the document     The json data can now be accessed by any functions of the script using dot notation  As an example   console log myJSON a      Outputs  b  to console console log myJSON c      Outputs  d  to console   This method may be a bit different from what you are used to seeing  but has many advantages  First  the same jsonp file can be loaded locally or from a server using the same functions  As a bonus  jsonp is already in a cross-domain friendly format and can also be easily used with REST type API s   Granted  there are no error handling functions  but why would you need one  If you are unable to get the json data using this method  then you can pretty much bet you have some problems within the json itself  and I would check it on a good JSON validator

User · Answer

What I did was editing the JSON file little bit   myfile json    myfile js  In the JSON file   make it a JS variable    name   Whatever      var x    name   Whatever    At the end   export default x   Then   import JsonObj from    myfile js

User · Answer

I haven t found any solution using Google s Closure library  So just to complete the list for future vistors  here s how you load a JSON from local file with Closure library   goog net XhrIo send     appData json   function evt      var xhr   evt target    var obj   xhr getResponseJson      JSON parsed as Javascript object   console log obj

User · Answer

Recently D3js is able to handle local json file   This is the issue https   github com mbostock d3 issues 673  This is the patch inorder for D3 to work with local json files  https   github com mbostock d3 pull 632

User · Answer

In angular  or any other framework   you can load using http get I use it something like this   this http get  lt path to your json file     success  data    gt  console log data      Hope this helps

User · Answer

I m surprised import from es6 has not been mentioned  use with small files   Ex  import test from    test json   webpack 2 lt  uses the json-loader as default for  json files   https   webpack js org guides migrating  json-loader-is-not-required-anymore  For TypeScript   import test from  json-loader   test json        TS2307  TS  Cannot find module  json-loader   suburbs json    To get it working I had to declare the module first  I hope this will save a few hours for someone   declare module  json-loader        let json  any    export default json          import test from  json-loader   test json     If I tried to omit loader from json-loader I got the following error from webpack      BREAKING CHANGE  It s no longer allowed to omit the  -loader  suffix   when using loaders                     You need to specify  json-loader  instead of  json                      see https   webpack js org guides migrating  automatic-loader-module-name-extension-removed

User · Answer

Found this thread when trying  unsuccessfully  to load a local json file  This solution worked for me     function load json src      var head   document getElementsByTagName  head   0        use class  as we can t reference by id   var element   head getElementsByClassName  json   0      try       element parentNode removeChild element       catch  e                  var script   document createElement  script      script type    text javascript     script src   src    script className    json     script async   false    head appendChild script        call the postload function after a slight delay to allow the json to load   window setTimeout postloadfunction  100          and is used like this     load json  test2 html js        and this is the  lt head gt       lt head gt     lt script type  text javascript  src  test html js  class  json  gt  lt  script gt   lt  head gt

User · Answer

Try is such way  but also please note that JavaScript don t have access to the client file system      getJSON  test json   function data      console log data

User · Answer

getJSON is asynchronous so you should do     getJSON  test json   function json        console log json      this will show the info it in firebug console

User · Answer

You can put your json in a javascript file  This can be loaded locally  even in Chrome  using jQuery s getScript   function   map-01 js file   var json      layers  6   worldWidth  500   worldHeight  400     main js    getScript  map-01 js        done function  script  textStatus            var map   JSON parse json     json is declared in the js file         console log  world width      map worldWidth           drawMap map               fail function  jqxhr  settings  exception            console log  error loading map      exception             output   world width  500   Notice that the json variable is declared and assigned in the js file

User · Answer

ajax          url   Scripts testingJSON json                force to handle it as text        dataType   text               success  function  dataTest                       data downloaded so we call parseJSON function                    and pass downloaded data                 var json     parseJSON dataTest                     now json variable contains data in json format                   let s display a few items                   each json  function  i  jsonObjectList                    for  var index   0  index  lt  jsonObjectList listValue  length index                            alert jsonObjectList listKey  index  0      --     jsonObjectList listValue  index  description

User · Answer

simplest way  save json file as   js and include to html template as script  js file like this  let fileJsonData       someField  someValue           include like this       lt script src  quot   js jsonData js quot  gt  lt  script gt       After include you can call to fileJsonData in global scope

User · Answer

In a more modern way  you can now use the Fetch API   fetch  test json      then response   gt  response json       then json   gt  console log json      All modern browsers support Fetch API   Internet Explorer doesn t  but Edge does    source    Using Fetch Fetch in Action Can I use

User · Answer

I can t believe how many times this question has been answered without understanding and or addressing the problem with the Original Poster s actual code  That said  I m a beginner myself  only 2 months of coding   My code does work perfectly  but feel free to suggest any changes to it   Here s the solution      include the    async  false   parameter or the object data won t get captured when loading var json     getJSON   url    http   spoonertuner com projects test test json    async   false         The next line of code will filter out all the unwanted data from the object  json   JSON parse json responseText       You can now access the json variable s object data like this json a and json c document write json a   console log json     Here s a shorter way of writing the same code I provided above   var json   JSON parse   getJSON   url    http   spoonertuner com projects test test json    async   false   responseText     You can also use   ajax instead of   getJSON to write the code exactly the same way   var json   JSON parse   ajax   url    http   spoonertuner com projects test test json    async   false   responseText      Finally  the last way to do this is to wrap    ajax in a function   I can t take credit for this one  but I did modify it a bit   I tested it and it works and produces the same results as my code above    I found this solution here --  load json into variable  var json   function          var jsonTemp   null        ajax            async   false           url    http   spoonertuner com projects test test json            success   function  data                jsonTemp   data                        return jsonTemp         document write json a   console log json     The test json file you see in my code above is hosted on my server and contains the same json data object that he  the original poster  had posted           a     b        c     d

User · Answer

ES5 version  function loadJSON callback        var xobj   new XMLHttpRequest        xobj overrideMimeType  application json        xobj open  GET    my data json   true          Replace  my data  with the path to your file     xobj onreadystatechange   function             if  xobj readyState     4  amp  amp  xobj status     200                   Required use of an anonymous callback                 as  open   will NOT return a value but simply returns undefined in asynchronous mode             callback xobj responseText                        xobj send null      function init         loadJSON function response               Parse JSON string into object         var actual JSON   JSON parse response               ES6 version   x000D   x000D  const loadJSON    callback    gt    x000D      let xobj   new XMLHttpRequest    x000D      xobj overrideMimeType  application json    x000D      xobj open  GET    my data json   true   x000D         Replace  my data  with the path to your file x000D      xobj onreadystatechange        gt    x000D          if  xobj readyState     4  amp  amp  xobj status     200    x000D                 Required use of an anonymous callback  x000D                 as  open   will NOT return a value but simply returns undefined in asynchronous mode x000D              callback xobj responseText   x000D            x000D         x000D      xobj send null   x000D    x000D   x000D  const init        gt    x000D      loadJSON  response    gt    x000D             Parse JSON string into object x000D          let actual JSON   JSON parse response   x000D          x000D    x000D   x000D   x000D

User · Answer

If you are using a local array for JSON - as you showed in your example in the question  test json  then you can is the parseJSON   method of JQuery -   var obj   jQuery parseJSON    name   John      alert  obj name      John       getJSON   is used for getting JSON from a remote site - it will not work locally  unless you are using a local HTTP Server

User · Answer

If you have Python installed on your local machine  or you don t mind install one   here is a browser-independent workaround for local JSON file access problem that I use   Transform the JSON file into a JavaScript by creating a function that returns the data as JavaScript object  Then you can load it with  lt script gt  tag and call the function to get the data you want   Here comes the Python code  import json   def json2js jsonfilepath  functionname  getData           function converting json file to javascript file  json data - gt  json data js      param jsonfilepath  path to json file      param functionname  name of javascript function which will return the data      return None               load json data     with open jsonfilepath  r   as jsonfile          data   json load jsonfile        write transformed javascript file     with open jsonfilepath   js    w   as jsfile          jsfile write  function   functionname     return            jsfile write json dumps data           jsfile write        if   name         main         from sys import argv     l   len argv      if l    2          json2js argv 1       elif l    3          json2js argv 1   argv 2       else          raise ValueError  Usage  python pathTo json2js py jsonfilepath  jsfunctionname

[javascript] Loading local JSON file

Examples related to javascript

Examples related to jquery

Examples related to json

Examples related to firebug

Examples related to local-files