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

JavascriptJsonRequirejs

Javascript Problem Overview


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.

Javascript Solutions


Solution 1 - Javascript

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
});

Solution 2 - Javascript

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){
  ...
})

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionThomasReggiView Question on Stackoverflow
Solution 1 - JavascriptWillem D'HaeseleerView Answer on Stackoverflow
Solution 2 - JavascriptmikemaccanaView Answer on Stackoverflow