loading json data from local file into React JS

Question

I have a React component and I want to load in my JSON data from a file  The console log currently doesn t work  even though I m creating the variable data as a global   use strict    var React   require  react addons        load in JSON data from file var data   var oReq   new XMLHttpRequest    oReq onload   reqListener  oReq open  get    data json   true   oReq send     function reqListener e        data   JSON parse this responseText     console log data    var List   React createClass     getInitialState  function         return  data  this props data              render  function         var listItems   this state data map function item            var eachItem   item works work                   var photo   eachItem map function url                return                    lt td gt  url urls  lt  td gt                                         return  lt ul gt  listItems  lt  ul gt           var redBubble   React createClass       render  function           return            lt div gt             lt List data  data   gt                     lt  div gt                        module exports   redBubble    Ideally  I would prefer to do it something like this  but it s not working - it tries to add   js  onto the end of the filename   var data   require    data json      Any advice on the best way  preferably the  React  way  would be much appreciated

User · Accepted Answer

You are opening an asynchronous connection, yet you have written your code as if it was synchronous. The reqListener callback function will not execute synchronously with your code (that is, before React.createClass), but only after your entire snippet has run, and the response has been received from your remote location.

Unless you are on a zero-latency quantum-entanglement connection, this is well after all your statements have run. For example, to log the received data, you would:

function reqListener(e) {
    data = JSON.parse(this.responseText);
    console.log(data);
}

I'm not seeing the use of data in the React component, so I can only suggest this theoretically: why not update your component in the callback?

User · Answer

The simplest and most effective way to make a file available to your component is this   var data   require  json   data json      Note the json  before the path

User · Answer

If you want to load the file  as part of your app functionality  then the best approach would be to include and reference to that file   Another approach is to ask for the file  and load it during runtime  This can be done with the FileAPI  There is also another StackOverflow answer about using it  How to open a local disk file with Javascript   I will include a slightly modified version for using it in React   class App extends React Component     constructor props        super props       this state           data  null            this handleFileSelect   this handleFileSelect bind this          displayData content        this setState  data  content           handleFileSelect evt        let files   evt target files      if   files length          alert  No file select          return            let file   files 0       let that   this      let reader   new FileReader        reader onload   function e          that displayData e target result              reader readAsText file          render         const data   this state data      return          lt div gt           lt input type  file  onChange  this handleFileSelect   gt            data  amp  amp   lt p gt   data   lt  p gt           lt  div gt

User · Answer

install json-loader   npm i json-loader --save create data folder in src   mkdir data put your file s  there load your file  var data   require  json    data yourfile json

User · Answer

If you have couple of json files   import data from  sample json     If you were to dynamically load one of the many json file  you might have to use a fetch instead   fetch    fileName  json      then response   gt  response json       then data   gt  console log data

User · Answer

My JSON file name  terrifcalculatordata json                quot id quot   1         quot name quot    quot Vigo quot          quot picture quot    quot   static images vigo png quot          quot charges quot    quot PKR 100 per excess km quot                      quot id quot   2         quot name quot    quot Mercedes quot          quot picture quot    quot   static images Marcedes jpg quot          quot charges quot    quot PKR 200 per excess km quot                        quot id quot   3           quot name quot    quot Lexus quot            quot picture quot    quot   static images Lexus jpg quot            quot charges quot    quot PKR 150 per excess km quot             First   import on top  import calculatorData from  quot    static data terrifcalculatordata json quot    then after return     lt div gt          calculatorData map  calculatedata  index    gt            return                lt div key  index  gt                   lt img                     src  calculatedata picture                      class  quot d-block quot                      height  quot 170 quot                    gt                   lt p gt                       calculatedata charges                   lt  p gt               lt  div gt

User · Answer

I was trying to do the same thing and this is what worked for me  ES6 ES2015    import myData from    data json     I got the solution from this answer on a react-native thread asking the same thing   https   stackoverflow com a 37781882 176002

User · Answer

You could add your JSON file as an external using webpack config  Then you can load up that json in any of your react modules   Take a look at this answer

[javascript] loading json data from local file into React JS

Examples related to javascript

Examples related to ajax

Examples related to json

Examples related to xmlhttprequest

Examples related to reactjs