I've written a small I18n plugin that accepts different languages via json. To make usage as simple as possible for the user, I want them to be able to just plop their json package directly in a page's along with the actual script:

<script id="pop-language_es" type="application/json" src='languages/es.json'></script>
<script src='pop.js'></script>

To keep this plugin as lean as possible, I want to avoid external dependencies like Jquery. I can retrieve the script tag using pure js:

var json = document.getElementById("pop-language_es");

The problem is, this is only the tag, not the actual json. Is there a way to retrieve the contents with something like json.content?

There's a similar question here, in which several people remend using Ajax. That would definitely work in this situation, but wouldn't that result in the client downloading the json twice? (First during the page load, then again during the Ajax call.) If so, I'd hope there's a better option, as these json files can get quite large.

I've written a small I18n plugin that accepts different languages via json. To make usage as simple as possible for the user, I want them to be able to just plop their json package directly in a page's along with the actual script:

<script id="pop-language_es" type="application/json" src='languages/es.json'></script>
<script src='pop.js'></script>

To keep this plugin as lean as possible, I want to avoid external dependencies like Jquery. I can retrieve the script tag using pure js:

var json = document.getElementById("pop-language_es");

The problem is, this is only the tag, not the actual json. Is there a way to retrieve the contents with something like json.content?

There's a similar question here, in which several people remend using Ajax. That would definitely work in this situation, but wouldn't that result in the client downloading the json twice? (First during the page load, then again during the Ajax call.) If so, I'd hope there's a better option, as these json files can get quite large.

• javascript
• json

• 2 You can't read the contents of <script> tags loaded with a "src" attribute. Just don't include one at all, and just read the script with ajax. – Pointy Commented Feb 21, 2014 at 22:11
• 1 A JSONP-like solution might work here, where es.json is written to invoke a pre-defined function with its payload. – Gabriel Isenberg Commented Feb 21, 2014 at 22:12
• 1 Note: JSON files are not valid/useful JavaScript programs. You'll either have to use something like AJAX to access the raw data, or wrap the JSON file contents (making "not a JSON file") such as a JSON-P or "side-effect" solution as proposed by Gabriel or Jasper. – user2864740 Commented Feb 21, 2014 at 22:14
• Wow! I just want to say that the JS munity on Stackoverflow is incredible. I'm used to posting Ruby questions, where it might take 10-15 minutes for a response. It's only been five minutes and there are already three answers and several ments. Thanks, you all! – nullnullnull Commented Feb 21, 2014 at 22:17

2 Answers 2

What you can do is set a global variable within your external file:

window.myJSON = { ... };

Then your other code can access that data via window.myJSON.

I'm not sure how browsers parse .json files so you may need to change the extension to .js.

Once you include your javascript file, you are able to access it's content (variable,methods,...) within your main file. document.getElementById has nothing to do with the contents on it, it is only looking for the DOM element itself, not the file.