57

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.

2
  • Exactly what is your question then ? because i don't see any problem with that. Commented Mar 9, 2013 at 18:03
  • 1
    @WillemD'haeseleer Well I'm not sure how I'm supposed to do it. I can't include a .json file in paths. Commented Mar 9, 2013 at 18:04

2 Answers 2

67

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
});
9
  • 3
    I went with requirejs-plugins and it has a json plugin I totally overlooked. It uses text as a dependency though. So thanks! I just started working with requirejs today on the browser and it's awesome. I'm still hoping that when I build it's going to to stop using ajax to fetch the document. Commented Mar 9, 2013 at 18:19
  • @ThomasReggi check my adapted answer for info on that Commented Mar 9, 2013 at 18:23
  • 2
    I have trouble with using text! for JSON content when combined with r.js to optimize. Just a heads up.
    – SimplGy
    Commented Jun 15, 2013 at 19:59
  • @SimpleAsCouldBe Please elaborate on your troubles Commented Jun 15, 2013 at 20:47
  • 1
    @WillemD'haeseleer I sometimes use text!./colors.json, then do a parse on it as a way to get config values. This worked in dev, but the r.js optimizer throws an error. I isolated it to that specific file, and when replaced with a standard module wrapped in an amd define like ./colors, the optimizer no longer fails. I wasn't interested in getting to root cause, Just had to finish the job. Would be happy to talk offline if you'd like.
    – SimplGy
    Commented Jun 17, 2013 at 17:18
10

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){
  ...
})
4
  • 4
    for those that find this unclear, ["json!/some/ajax/endpoint"] works great too
    – penguat
    Commented Nov 18, 2014 at 15:36
  • 4
    Is it possible to load local file?
    – Erik
    Commented Nov 20, 2014 at 6:37
  • 2
    @erik I normally use a webserver (via gulp) to develop locally so always load a http:// or https:// URL. I'd recommend you do the same. If you're asking about file:// URLs, I don't know. Commented Nov 21, 2014 at 9:16
  • Doesn't seem to work for file URLs. I keep getting this error in Chrome: Access to XMLHttpRequest at 'file:///C:/test/settings.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https, isolated-app. Commented Sep 19, 2022 at 8:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.