How do I use requirejs to load a static JSON file?

Question

I want to keep a JSON document to store some simple data and I want to require this document and use the JSON object in a define() call so I can use it. This is not an async call. I mean it should be for development but I do want to compile the file on build unlike an actual async call from an API, where the content is dynamic.

Answer 1

The easiest way to do this is by using the requirejs json plugin for this, this will allow you to include your file into the build as well.

https://github.com/millermedeiros/requirejs-plugins
Here is an example:

require(['json!someFile.json'], function(data){   ... }) // It does not actually need to be a .json extension, this will work to: require(['json!someFile'], function(data){   ... }) 

If you want to include the file in your r.js build so that it is always optimized in the main/js bootstrap file you have to add it to the include option

You could also use the require js text plugin for this, it's usually used to load template files but you can use it to load .json files as well.

https://github.com/requirejs/text

You will have to parse the contents your self then with JSON.parse
(Include json2.js to provide support for older browsers if that's required)

You could also wrap the json in it's own define() so you can just require it traditionally, but that won't work if you are limited to an actual .json file.

An other option is to require the text file trough ajax your self, with jquery or something.

$.get('somefile.json', function(data) {   // do something with your data }); 

Answer 2

Posting this an an answer, because:

• it's what the user asking the question actually used as their solution
• it's cleaner to look at than require text, since it always does the JSON.parse() for you.

RequireJS has a JSON plugin. The syntax is simply:

require(['json!someData.json'], function(data){   ... })