I have a data.js file with the following structure:
var DATA= {
"groups": [{
"id": "1",
"name": "group 1",
"subgroups": [{}, {}, ...]
}, ...],
...
}
Is it possible to load this file in my React app and make the DATA var available in any component (I will probably want to initiate Redux state with it), if I can't use export in this file and can't turn it into regular JSON file? Basically I can't edit this file. How can it be achieved?
Assuming:
data.js file is available during build timeYou can use webpack raw-loader(Other bundlers probably have alternatives) to load the content of the file and then parse the content to get the required data.
Example 👇
You can definitely use export in .js file. export default or module.exports should work. If you aren't using a language transformer then use the later approach.
var DATA = {
"groups": [{
"id": "1",
"name": "group 1",
"subgroups": [{}, {}, ...]
}, ...],
...
}
module.exports = DATA;
Otherwise convert the file into json format and directly use it.
{
"groups": [{
"id": "1",
"name": "group 1",
"subgroups": [{}, {}, ...]
}, ...],
...
}
React app file.js:
import data from './data.json';
// do something with data.groups
export in this file or turn it to JSON. The thing is I have (must) use the file as is, without editing it.
As I understand it, you just have a file with this exact structure and are looking for a way to access it in your app. Since it uses a var declaration, you can just include it in your web app via a <script> tag and DATA variable will be globally available in your code.
If you use TypeScript or FlowType, you should also provide a declaration file with declare var DATA: Data; where Data would be your custom interface describing the structure of this data object.
What I would suggest instead, though, is creating a single module that will consume the variable, provide a declaration in this module only, transform it however I like and export it from there. Just to give you an idea what it would look like:
interface Data {
groups: Group[];
}
interface Group {
id: string;
name: string;
subgroups: {}[]; // you might provide more type information here, but to begin it would do as well
}
declare var DATA: Data;
const APP_DATA: Data = DATA;
export default APP_DATA;
