How to read an external local JSON file in JavaScript

Question

I have saved a JSON file in my local system and created a JavaScript file in order to read the JSON file and print data out  Here is the JSON file    quot resource quot   quot A quot   quot literals quot    quot B quot   quot C quot   quot D quot     Let   s say this is the path of the JSON file   Users Documents workspace test json  Could anyone please help me write a simple piece of code to read the JSON file and print the data in JavaScript

User · Answer

Since you have a web application  you may have a client and a server   If you have only your browser  and you want to read a local file from a javascript that is running in your browser  that means that you have only a client  For security reasons  the browser should not let you do such thing   However  as lauhub explained above  this seems to work    http   www html5rocks com en tutorials file dndfiles   Other solution is to setup somewhere in your machine a web server  tiny in windows or monkey in linux  and with an XMLHttpRequest or D3 library  request the file from the server and read it  The server will fetch the file from the local filesystem  and serve it to you through the web

User · Answer

I took Stano s excellent answer and wrapped it in a promise  This might be useful if you don t have an option like node or webpack to fall back on to load a json file from the file system      wrapped XMLHttpRequest in a promise const readFileP    file  options    method  get      gt     new Promise  resolve  reject    gt        let request   new XMLHttpRequest        request onload   resolve      request onerror   reject      request overrideMimeType  application json        request open options method  file  true       request onreadystatechange        gt            if  request readyState     4  amp  amp  request status      200                 resolve request responseText                        request send null         You can call it like this   readFileP   lt path to file gt         then d   gt            lt do something with the response data in d srcElement response gt

User · Answer

If you are using local files  why not just packade the data as a js object   data js  MyData     resource  A  literals   B   C   D      No XMLHttpRequests  no parsing  just use MyData resource directly

User · Answer

All the solutions above mentioned will work only when you have a local webserver running on your local host  If you want to achieve this with out a web server  you might need to put in some manual effort by uploading the JSON file using file upload control  The browser will not offer this functionality with out a local server because of security risks  You can parse the uploaded file with out a local webserver as well  Here is the sample code I have achieved a solution similar problem    lt div id  quot content quot  gt       lt input type  quot file quot  name  quot inputfile quot  id  quot inputfile quot  gt       lt br gt        lt h2 gt           lt pre id  quot output quot  gt  lt  pre gt       lt  h2 gt   lt  div gt   lt script type  quot text javascript quot  gt      document getElementById  inputfile            addEventListener  change   function                   let fileReader   new FileReader                fileReader onload   function                      let parsedJSON   JSON parse fileReader result                   console log parsedJSON                      your code to consume the json                                               fileReader readAsText this files 0                 lt  script gt   In my case I want to read a local JSON file and show it in a html file on my desktop  that s all I have to do   Note  Don t try to automate the file uploading using JavaScript  even that s also not allowed due the same security restrictions imposed by browsers

User · Answer

You cannot make a AJAX call to a local resource as the request is made using HTTP   A workaround is to run a local webserver  serve up the file and make the AJAX call to localhost   In terms of helping you write code to read JSON  you should read the documentation for jQuery getJSON     http   api jquery com jQuery getJSON

User · Answer

You can import It like ES6 module   import data from   Users Documents workspace test json

User · Answer

So  if you are planning to go with  Apache Tomcat  for hosting your JSON file   1  After starting up the server  verify that your Apache Tomcat is up and running by going to this url   localhost 8080  -      2  Next  go to the  webapps  folder -  C  Program Files Apache Software Foundation Tomcat 8 5 webapps   And  create a project folder or copy your project folder      3  Paste your json file over there     4  And that s it  You are done  Just go to -  http   localhost 8080  project name   jsonFile name  json

User · Answer

You could use D3 to handle the callback  and load the local JSON file data json  as follows    lt script src    d3js org d3 v3 min js  charset  utf-8  gt  lt  script gt    lt script gt    d3 json  data json   function error  data        if  error        throw error      console log data          lt  script gt

User · Answer

First  create a json file  In this example my file is words json    x000D   x000D     name   ay   id   533    x000D    name   kiy   id   33    x000D    name   iy   id   33    x000D    name   iy   id   3    x000D    name   kiy   id   35    x000D    name   kiy   id   34    x000D   x000D   x000D     And here is my code i e node js  Note the  utf8  argument to readFileSync  this makes it return not a Buffer  although JSON parse can handle it   but a string  I am creating a server to see the result       x000D   x000D  var fs require  fs    x000D  var data fs readFileSync  words json    utf8    x000D  var words JSON parse data   x000D  var bodyparser require  body-parser    x000D  console log words   x000D  var express require  express    x000D   x000D  var app express    x000D   x000D  var server app listen 3030 listening   x000D   x000D  function listening    x000D  console log  listening      x000D    x000D  app use express static  website     x000D  app use bodyparser urlencoded  extended false     x000D  app use bodyparser json     x000D   x000D   x000D     When you want to read particular id details you can mention the code as      x000D   x000D   app get   get  id  function req res   x000D    x000D  var i  x000D      x000D   for i 0 i lt words length   i  x000D     x000D   if words i  id  req params id   x000D   res send words i    x000D     x000D    x000D  console log  success    x000D      x000D      x000D   x000D   x000D     When you entered in url as localhost 3030 get 33 it will give the details related to that id    and you read by name also  My json file has simillar names with this code you can get one name details    and it didn t print all the simillar names    x000D   x000D   app get   get  name  function req res   x000D    x000D  var i  x000D      x000D   for i 0 i lt words length   i  x000D     x000D   if words i  id  req params name   x000D   res send words i    x000D     x000D    x000D  console log  success    x000D      x000D      x000D   x000D   x000D     And if you want to read simillar name details  you can use this code     x000D   x000D  app get   get name  name  function req res   x000D  word   words filter function val   x000D    return val name     req params name  x000D      x000D  res send word   x000D       x000D   console log  success    x000D      x000D      x000D   x000D   x000D     If you want to read all the information in the file then use this code below     x000D   x000D  app get   all  sendAll   x000D    x000D   function sendAll request response   x000D   response send words   x000D   x000D     x000D    x000D   x000D   x000D

User · Answer

As many people mentioned before  this doesn t work using an AJAX call  However  there s a way around it  Using the input element  you can select your file   The file selected   json  need to have this structure           key    value          key2    value2                  keyn    valuen           lt input type  file  id  get the file  gt    Then you can read the file using JS with FileReader     document getElementById  get the file   addEventListener  change   function       var file to read   document getElementById  get the file   files 0     var fileread   new FileReader      fileread onload   function e        var content   e target result         console log content       var intern   JSON parse content      Array of Objects      console log intern      You can index every object        fileread readAsText file to read

User · Answer

You can use d3 js to import JSON files  Just call d3 on your html body   lt script src  quot https   d3js org d3 v5 min js quot  gt  lt  script gt   Then put this on your js scripts    d3 json  quot test json quot   then function data json               do your stuff

User · Answer

When in Node js or when using require js in the browser  you can simply do  let json   require   Users Documents workspace test json    console log json   the json obj     Do note  the file is loaded once  subsequent calls will use the cache

User · Answer

I liked what Stano Meetar commented above  I use it to read  json files  I have expanded their examples using Promise   Here is the plunker for the same  https   plnkr co edit PaNhe1XizWZ7C0r3ZVQx p preview   function readTextFile file  callback        var rawFile   new XMLHttpRequest        rawFile overrideMimeType  application json        rawFile open  GET   file  true       rawFile onreadystatechange   function             if  rawFile readyState     4  amp  amp  rawFile status     200                 callback rawFile responseText                       rawFile send null        usage     readTextFile  DATA json   function text          var data   JSON parse text          console log data             var task1   function       return new Promise  function resolve  reject       readTextFile  DATA json   function text       var data   JSON parse text       console log  task1 called        console log data       resolve  task1 came back                       var task2   function       return new Promise  function resolve  reject       readTextFile  DATA2 json   function text       var data2   JSON parse text       console log  task2 called        console log data2       resolve  task2 came back                     Promise race  task1    task2             then function fromResolve             console log fromResolve                 The reading of JSON can be moved into another function  for DRY  but the example here is more of showcasing how to use promises

User · Answer

Very simple  Rename your json file to   js  instead   json     lt script type  text javascript  src  my json js  gt  lt  script gt    So follow your code normally    lt script type  text javascript  gt  var obj   JSON parse contacts     However  just for information  the content my json it s looks like the snip below   contacts     name   bla bla    email  bla bla   address   bla bla

User · Answer

Using the Fetch API is the easiest solution   fetch  test json      then response   gt  response json       then json   gt  console log json      It works perfect in Firefox  but in Chrome you have to customize security setting

User · Answer

Just use   getJSON and then   each to iterate the pair Key  value  Content example for the JSON file and functional code                                key    INFO                value    This is an example                        var url    file json                  getJSON url  function  data              each data  function  key  model                if  model key     INFO                     console log model value

User · Answer

You must create a new XMLHttpRequest instance and load the contents of the json file   This tip work for me  https   codepen io KryptoniteDove post load-json-file-locally-using-pure-javascript     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          loadJSON function response           Parse JSON string into object     var actual JSON   JSON parse response

User · Answer

You can use XMLHttpRequest   method        var xmlhttp   new XMLHttpRequest        xmlhttp onreadystatechange   function         if  this readyState    4  amp  amp  this status    200            var myObj   JSON parse this responseText             console log  Json parsed data is      JSON stringify myObj                    xmlhttp open  GET    your file name json   true   xmlhttp send      You can see the response of myObj using console log statement commented out    If you know AngularJS  you can use  http   MyController  inject     myService    function MyController myService    var promise   myService getJsonFileContents       promise then function  response        var results   response data      console log  The JSON response is      JSON stringify results          catch function  error        console log  Something went wrong              myService  inject      http    function myService  http    var service   this     service getJsonFileContents   function          var response    http         method   GET         url    your file name json                return response           If you have the file in a different folder  mention the complete path instead of filename

User · Answer

One simple workaround is to put your JSON file inside a locally running server  for that from the terminal go to your project folder and start the local server on some port number e g 8181  python -m SimpleHTTPServer 8181   Then browsing to http   localhost 8181  should display all of your files including the JSON  Remember to install python if you don t already have

User · Answer

If you could run a local web server  as Chris P suggested above   and if you could use jQuery  you could try http   api jquery com jQuery getJSON

User · Answer

The loading of a  json file from harddisk is an asynchronous operation and thus it needs to specify a callback function to execute after the file is loaded   function readTextFile file  callback        var rawFile   new XMLHttpRequest        rawFile overrideMimeType  application json        rawFile open  GET   file  true       rawFile onreadystatechange   function             if  rawFile readyState     4  amp  amp  rawFile status     200                 callback rawFile responseText                       rawFile send null        usage  readTextFile   Users Documents workspace test json   function text       var data   JSON parse text       console log data         This function works also for loading a  html or  txt files  by overriding the mime type parameter to  text html    text plain  etc

User · Answer

Depending on your browser  you may access to your local files  But this may not work for all the users of your app   To do this  you can try the instructions from here  http   www html5rocks com en tutorials file dndfiles   Once your file is loaded  you can retrieve the data using   var jsonData   JSON parse theTextContentOfMyFile

User · Answer

For reading the external Local JSON file  data json  using javascript  first create your data json file   data       name     Ashwin    age     20     name     Abhinandan    age     20         Mention the path of the json file in the script source along with the javascript file    lt script type  text javascript  src  data json  gt  lt  script gt   lt script type  text javascript  src  javascrip js  gt  lt  script gt   Get the Object from the json file  var mydata   JSON parse data   alert mydata 0  name   alert mydata 0  age   alert mydata 1  name   alert mydata 1  age      For more information  see this reference

[javascript] How to read an external local JSON file in JavaScript?

Examples related to javascript

Examples related to json