Import JSON files in the browser using ES6 style syntax with React

Question

I have folder, with a lot of JSON files:

-json
--file1.json
--anotherfile.json
  ...
--lastfile.json

How can I import all of them from that folder, without explicitly defining their names?

Suppose, I should use something like this:

import * as jsonFiles from './json'

but it doesn't work.

So, how can I do this?

Important note: this is not Node.js, I'm using it with React on client side.

Not a duplicate, the question explicitly says 'without explicitly defining their names'. For programmatically defined import list `require` should be used instead of `import`. This can be done with `require-dir-all` or whatever. — Estus Flask, Jan 30 '17 at 13:14
@JoeClay this question differ from yours proposed, I want to import json files, and do it on client-side. — Yurii N., Jan 30 '17 at 13:16
If it's front-end not backend (e.g. Node) then I think you'll need to use some form of AJAX. — evolutionxbox, Jan 30 '17 at 13:32
Also http://stackoverflow.com/questions/29421409/how-to-load-all-files-in-a-subdirectories-using-webpack-without-require-statemen — Estus Flask, Jan 30 '17 at 14:13
If you don't know their names, how will you use the imported files? — a better oliver, Jan 30 '17 at 15:53
@ I know their structure, which is similar, it would be enough. — Yurii N., Jan 30 '17 at 15:57

score -1 · Answer 1 · answered Jan 30 '17 at 13:23

-1

The list of files from server side cannot be retrieved from client side, especially if the app isn't prebuilt with build tool but uses ES6 module loader.

The proper way here is to retrieve jsonFiles object via AJAX request on client side, and the server is responsible for reading the directory and merging JSON files into a single object.

answered Jan 30 '17 at 13:23

Estus Flask

206,104
70
425
565

1

Some misunderstood here. I'm developing on React library, which is client-side, so I want to get all those json files in one of react files. Client-server communication not mentioned. – Yurii N. Jan 30 '17 at 13:47
You've provided `es6-module-loader` tag. This means that the modules are loaded dynamically. If it is not so, the question is wrong and misses the details on how the library is being built. – Estus Flask Jan 30 '17 at 13:54
I have react jsx file, where I want to load all those json files. They don't load dynamically. What have I missed? – Yurii N. Jan 30 '17 at 14:00
How do you build your app? Is it Webpack or anything else? – Estus Flask Jan 30 '17 at 14:05
Yes, with Webpack. – Yurii N. Jan 30 '17 at 14:09
There are questions that already explain that. Still, AJAX option is applicable, it totally depends on what json files are. – Estus Flask Jan 30 '17 at 14:14
Ajax not so applicable, those files are static. What questions, for example? – Yurii N. Jan 30 '17 at 14:23
I've listed them as duplicates in question comments (they are direct duplicates indeed). – Estus Flask Jan 30 '17 at 14:28

Import JSON files in the browser using ES6 style syntax with React

1 Answers1