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.

Max
  • 1,054
  • 1
  • 12
  • 20
ThomasReggi
  • 55,053
  • 85
  • 237
  • 424

2 Answers2

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
});
Willem D'Haeseleer
  • 19,661
  • 9
  • 66
  • 99
  • 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. – ThomasReggi Mar 09 '13 at 18:19
  • @ThomasReggi check my adapted answer for info on that – Willem D'Haeseleer Mar 09 '13 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 Jun 15 '13 at 19:59
  • @SimpleAsCouldBe Please elaborate on your troubles – Willem D'Haeseleer Jun 15 '13 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 Jun 17 '13 at 17:18
  • +1 for the "better option" of just defining an object module containing what would be the JSON object, if you are able to modify the original JSON as such. – Ben Mosher Jun 03 '14 at 19:51
  • @ThomasReggi the json plugin uses eval rather than json.parse; I wouldn't recommend using it. I'm going to try the noext plugin and then parse it with JSON.parse . – Andrew Luhring Jul 29 '14 at 00:24
  • If you prefer to load json by using `define(['jquery','data.json'], function($, jsonData){...});` or `require(['jquery','data.json'], function($, jsonData){...});`, keep in mind, that `var parsedJson = $.parseJSON(jsonData);` does this trick as well :). – Stanislav Terletskyi Oct 20 '14 at 14:32
  • Should this work for local JSON files? 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.` – Krisztián Balla Sep 19 '22 at 08:14
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){
  ...
})
kumarharsh
  • 18,961
  • 8
  • 72
  • 100
mikemaccana
  • 110,530
  • 99
  • 389
  • 494
  • 4
    for those that find this unclear, ["json!/some/ajax/endpoint"] works great too – penguat Nov 18 '14 at 15:36
  • 4
    Is it possible to load local file? – Erik Nov 20 '14 at 06: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. – mikemaccana Nov 21 '14 at 09: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.` – Krisztián Balla Sep 19 '22 at 08:15