Import JSON file in React

Question

I m new to React and I m trying to import a JSON DATA variable from an external file  I m getting the following error       Cannot find module    customData json    Could some one help me  It works if I have my DATA variable in index js but not when it s in an external JSON file   index js  import React   Component  from  react   import ReactDOM from  react-dom   import customData from    customData json   import Profile from    components profile   import Hobbies from    components hobbies    class App extends Component     render         return          lt div gt           lt Profile name  this props profileData name imgUrl  this props profileData imgURL    gt           lt Hobbies hobbyList  this props profileData hobbyList   gt         lt  div gt                ReactDOM render  lt App profileData  DATA   gt   document querySelector   container       hobbies js  import React   Component  from  react    var Hobbies   React createClass     render  function        var hobbies   this props hobbyList map function hobby  index           return   lt li key  index  gt  hobby  lt  li gt                return            lt div gt               lt h5 gt My hobbies  lt  h5 gt               lt ul gt                   hobbies               lt  ul gt           lt  div gt                   export default Hobbies    profile js  import React from  react    var Profile   React createClass   render  function        return            lt div gt               lt h3 gt  this props name  lt  h3 gt               lt img src  this props imgUrl    gt           lt  div gt                 export default Profile   customData json  var DATA             name   John Smith       imgURL   http   lorempixel com 100 100        hobbyList    coding    writing    skiing      export default DATA

User · Answer

Simplest approach is following      Save this as someJson js const someJson       name   Name     age  20    export default someJson   then   import someJson from    someJson

User · Answer

One nice way  without adding a fake  js extension which is for code not for data and configs  is to use json-loader module  If you have used create-react-app to scaffold your project  the module is already included  you just need to import your json   import Profile from    components profile     This answer explains more

User · Answer

This old chestnut     In short  you should be using require and letting node handle the parsing as part of the require call  not outsourcing it to a 3rd party module  You should also be taking care that your configs are bulletproof  which means you should check the returned data carefully   But for brevity s sake  consider the following example   For Example  let s say I have a config file  admins json  in the root of my app containing the following   admins json        userName    tech1337      passSalted    xxxxxxxxxxxx       Note the quoted keys   userName    passSalted    I can do the following and get the data out of the file with ease     let admins   require    app admins json    console log admins 0  userName       Now the data is in and can be used as a regular  or array of  object

User · Answer

rename the  json file to  js and keep in src folder  Declare the json object as a variable  var customData         key   value       Export it using module exports   module exports   customData   From the component that needs it  make sure to back out two folders deep  import customData from     customData

User · Answer

The solution that worked for me is that - I moved my data json file from src to public directory  Then used fetch API to fetch the file  fetch    data json   then response   gt          console log response         return response json           then data   gt             Work with JSON data here       console log data          catch err   gt             Do something for an error here       console log  Error Reading data     err             The problem was that after compiling react app the fetch request looks for the file at URL  http   localhost 3000 data json  which is actually the public directory of my react app  But unfortunately while compiling react app data json file is not moved from src to public directory  So we have to explicitly move data json file from src to public directory

User · Answer

there are multiple ways to do this without using any third-party code or libraries  the recommended way   1st STATIC WAY  create a  json file then import it in your react component example my file name is  quot example json quot    quot example quot     quot my text quot    the example key inside the example json can be anything just keep in mind to use double quotes to prevent future issues  How to import in react component import myJson from  quot jsonlocation quot    and you can use it anywhere like this myJson example  now there are a few things to consider  With this method  you are forced to declare your import at the top of the page and cannot dynamically import anything  Now  what about if we want to dynamically import the JSON data  example a multi-language support website  2 DYNAMIC WAY 1st declare your JSON file exactly like my example above but this time we are importing the data differently  let language   require    en json     this can access the same way  but wait where is the dynamic load  here is how to load the JSON dynamically let language   require      variable  json     now make sure all your JSON files are within the same directory here you can use the JSON the same way as the first example myJson example  what changed  the way we import because it is the only thing we really need  I hope this helps

User · Answer

Something that worked for me was to simply place the JSON file in the public folder  You can simply import in any js using brain loadData  quot exampleFile json quot     It is as simple as that I guess  Definitely worth a try  D

User · Answer

try with export default DATA or  module exports   DATA

User · Answer

This worked well in React 16 11 0     in customData js export const customData         json data here   name   John Smith     imgURL   http   lorempixel com 100 100      hobbyList    coding    writing    skiing         in index js import   customData   from    customData       example usage later in index js  lt p gt  customData name  lt  p gt

User · Answer

Please store your JSON file with the  js extension and make sure that your JSON should be in same directory

User · Answer

With json-loader installed  you can use  import customData from     customData json     or also  even more simply  import customData from     customData     To install json-loader  npm install --save-dev json-loader

User · Answer

var langs     ar AR require    locale ar AR json      cs CZ require    locale cs CZ json      de DE require    locale de DE json      el GR require    locale el GR json      en GB require    locale en GB json      es ES require    locale es ES json      fr FR require    locale fr FR json      hu HU require    locale hu HU json     module exports langs   Require it in your module  let langs require    languages     regards

[javascript] Import JSON file in React

Examples related to javascript

Examples related to json

Examples related to reactjs