Load and display json data in react component

Question

I'm trying to load in data from a json file in a react component. I am trying this solution in my app.js.

https://stackoverflow.com/a/33141549/1937021

var data = require('json!../json/acordes.json');

"Cannot resolve module JSON error" in the terminal.

I do this in the app.js file. My folder structure is as follows:

/src
  /js
    app.js
  /css
  /json
    acordes.json

The rest of my code looks like this:

https://gist.github.com/dabit3/651f2dae058ff99810eb771c2817d622

How are you building your bundle?

Alexandr Lazarev
– Alexandr Lazarev

2016-08-05 08:49:32 +00:00
Commented Aug 5, 2016 at 8:49 — Alexandr Lazarev
– Alexandr Lazarev, Commented Aug 5, 2016 at 8:49

Alexandr Lazarev · Accepted Answer · 2016-08-05 09:10:11Z

5

I may be mistaken, but in order to be able to require json in such a way, you have to use webpack with json-loader.

Assuming, you use webpack. Install json-loader:

npm install --save json-loader

And add to webpack loaders:

//.. 
loaders: [
  {test: /\.json$/, loader: "json", include: "path/to/your/sources"}
]

edited Aug 5, 2016 at 9:10

answered Aug 5, 2016 at 8:56

Alexandr Lazarev

13k4 gold badges40 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1937021 Over a year ago

I did this but now I get ´ERROR in ./~/json-loader!./src/json/acordes.json Module build failed: SyntaxError: Unexpected token m at Object.parse (native) at Object.module.exports (/Users/alexanderlloyd/Documents/tocacuatro/node_modules/json-loader/index.js:7:48) @ ./src/js/App.js 66:11-47´

Alexandr Lazarev Over a year ago

Could you please provide your json file?

Collectives™ on Stack Overflow

Load and display json data in react component

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related