HTML/Javascript: how to access JSON data loaded in a script tag with src set

Question

I have this JSON file I generate in the server I want to make accessible on the client as the page is viewable. Basically what I want to achieve is:

I have the following tag declared in my html document:

<script id="test" type="application/json" src="http://myresources/stuf.json">

The file referred in its source has JSON data. As I've seen, data has been downloaded, just like it happens with the scripts.

Now, how do I access it in Javascript? I've tried accessing the script tag, with and without jQuery, using a multitude of methods to try to get my JSON data, but somehow this doesn't work. Getting its innerHTML would have worked had the json data been written inline in the script. Which it wasn't and isn't what I'm trying to achieve.

Remote JSON Request after page loads is also not an option, in case you want to suggest that.

Solution 1

You can't load JSON like that, sorry.

I know you're thinking "why I can't I just use src here? I've seen stuff like this...":

<script id="myJson" type="application/json">
 { 
   name: 'Foo' 
 }
</script>

<script type="text/javascript">
    $(function() {
        var x = JSON.parse($('#myJson').html());
        alert(x.name); //Foo
     });
</script>

... well to put it simply, that was just the script tag being "abused" as a data holder. You can do that with all sorts of data. For example, a lot of templating engines leverage script tags to hold templates.

You have a short list of options to load your JSON from a remote file:

1. Use $.get('your.json') or some other such AJAX method.
2. Write a file that sets a global variable to your json. (seems hokey).
3. Pull it into an invisible iframe, then scrape the contents of that after it's loaded (I call this "1997 mode")
4. Consult a voodoo priest.

Final point:

Remote JSON Request after page loads is also not an option, in case you want to suggest that.

... that doesn't make sense. The difference between an AJAX request and a request sent by the browser while processing your <script src=""> is essentially nothing. They'll both be doing a GET on the resource. HTTP doesn't care if it's done because of a script tag or an AJAX call, and neither will your server.

Solution 2

Another solution would be to make use of a server-side scripting language and to simply include json-data inline. Here's an example that uses PHP:

<script id="data" type="application/json"><?php include('stuff.json'); ?></script>
<script>
var jsonData = JSON.parse(document.getElementById('data').textContent)
</script>

The above example uses an extra script tag with type application/json. An even simpler solution is to include the JSON directly into the JavaScript:

<script>var jsonData = <?php include('stuff.json');?>;</script>

The advantage of the solution with the extra tag is that JavaScript code and JSON data are kept separated from each other.

Solution 3

It would appear this is not possible, or at least not supported.

From the HTML5 specification:

When used to include data blocks (as opposed to scripts), the data must be embedded inline, the format of the data must be given using the type attribute, the src attribute must not be specified, and the contents of the script element must conform to the requirements defined for the format used.

Solution 4

While it's not currently possible with the script tag, it is possible with an iframe if it's from the same domain.

<iframe
id="mySpecialId"
src="/my/link/to/some.json"
onload="(()=>{if(!window.jsonData){window.jsonData={}}try{window.jsonData[this.id]=JSON.parse(this.contentWindow.document.body.textContent.trim())}catch(e){console.warn(e)}this.remove();})();"
onerror="((err)=>console.warn(err))();"
style="display: none;"
></iframe>

To use the above, simply replace the id and src attribute with what you need. The id (which we'll assume in this situation is equal to mySpecialId) will be used to store the data in window.jsonData["mySpecialId"].

In other words, for every iframe that has an id and uses the onload script will have that data synchronously loaded into the window.jsonData object under the id specified.

I did this for fun and to show that it's "possible' but I do not recommend that it be used.

---

Here is an alternative that uses a callback instead.

<script>
    function someCallback(data){
        /** do something with data */
        console.log(data);

    }
    function jsonOnLoad(callback){
        const raw = this.contentWindow.document.body.textContent.trim();
        try {
          const data = JSON.parse(raw);
          /** do something with data */
          callback(data);
        }catch(e){
          console.warn(e.message);
        }
        this.remove();
    }
</script>
<!-- I frame with src pointing to json file on server, onload we apply "this" to have the iframe context, display none as we don't want to show the iframe -->
<iframe src="your/link/to/some.json" onload="jsonOnLoad.apply(this, someCallback)" style="display: none;"></iframe>

Tested in chrome and should work in firefox. Unsure about IE or Safari.

Solution 5

I agree with Ben. You cannot load/import the simple JSON file.

But if you absolutely want to do that and have flexibility to update json file, you can

my-json.js

   var myJSON = {
      id: "12ws",
      name: "smith"
    }

index.html

<head>
  <script src="my-json.js"></script>
</head>
<body onload="document.getElementById('json-holder').innerHTML = JSON.stringify(myJSON);">
  <div id="json-holder"></div>
</body>

View more solutions

Comments

[Asad Saeeduddin]

Instead of a json file, make it a javascript file that assigns the object to a variable. The other approach is to use ajax.

[ChuckE]

The first suggestion is the current implementation. I would like not to do it because I'm using behaviour to deliver structure. I'd prefer to use structure for structure (if I want JSON, i'll get JSON). Second suggestion is not wanted (I need this data for the initialization process).

[Pointy]

@ChuckE through a <script> tag or through AJAX you're still going to have to wait for an additional HTTP request to complete. The browser won't let you read the script contents if you fetch it with a "src" attribute, so your only alternative is to make an AJAX request.

[ChuckE]

@Pointy through a <script> tag stuff will be evaluated as soon as is downloaded. If I place my json script before my js script, json script data will get evaluated before js script data, that means, I'm not going to wait, data is already there. About it being my only alternative, I'd like to see some official documentation before agreeing with you (not saying you're wrong, just that was exactly the reason I wrote the question).

[Ben Lesh]

"Remote JSON Request after page loads is also not an option, in case you want to suggest that." ... how is a JSON request so much different than a request sent by a <script src=""></script>? They're both going to be doing GET calls against your server.

[ChuckE]

Great answer. When you say "the script tag being 'abused'" you mean that is a wrong (maybe not wrong, but "creative") use of the script tag? Your n. 2 option is the one we already have in production, I was looking for a strictly json/no-js solution, out of pure experimentation (I'm fine with it not being possible if I'm sure it is). Concerning the final point, I need this information before onload event, and I don't want to make the whole initialization depend of an asynchronous request which may vary in completion time. This is the key difference between Ajax call and script tag.

[Ben Lesh]

No, I don't think it's "wrong", per say, just... "creative" is probably a good word for it. If actually writing the JSON into the <script> tag is possible, I'd go that route, I guess.

[ChuckE]

yeh, the whole challenge was loading it using the script tag src attribute and "obfuscate" this information in the document.

[Ben Lesh]

Well, you can't really hide data from users in a client-side browser app. They can just go into their browser's developer tools and set a breakpoint in the JavaScript and examine objects however they like.

[ChuckE]

I don't want to hide data from the user, I want to hide js data from HTML (keep HTML in the document, keep javascript in javascript)

[Jaydipsinh]

hii. can you tell me how can i use your function to get json data from src attribute. because i don't have body of script tag as u defined { name: 'Foo' } but in my case this should fill dynamically from url

[Ben Lesh]

@Jaydipsinh You can't load JSON like that. If you want to load it from a URL, you'd just use ajax. $.get('whatever.json');

[Jaydipsinh]

@blesh: but i got json data from other port so i got cross-origin problem, can't make ajax call and i've tried with <script> tab with src so there in body i got json data

[Ben Lesh]

@Jaydipsinh, then you need to resolve your CORS issues, and use Ajax. There's a reason browsers disallow this sort of behavior. Most browsers won't even let you hack your way around CORS with an iframe anymore.

[e-sushi]

JSONP does not work with JSON-formatted results. Also, the JSONP parameters passed as arguments to a script are defined by the server… which you might not have access to.

[Tobi G.]

$.getJSON() is an ajax call.

[Seth McClaine]

+ for text content. .html doesn't work for me on the script tag

[T.Doe]

How can I show the info in a linked HTML file instead of the console?

[Kyle]

I'm writing a custom web app for reporting api test results stored in json that the developer will access directly from the file system and Chrome disallows ajax requests to file:// unless started with a special flag for security reasons, so unfortunately such abuse has become a viable option for me in this scenario.

[Kyle]

Except it doesn't work at all with an empty script element with a src attribute pointing to an external file. Sigh.

[Admin]

Seem to be a policy to handle data as more sensitive than JS and CSS.

[Admin]

Difference between Ajax and script-load is essetially nothing when doing a GET.. Does it mean Ajax also has exactly the same restrictions? With CORS on server the Access-Control-Allow must be set? I have read script-loading is more allowing than Ajax and because of that is most preferred in script-loaders.

[Srini Karthikeyan]

Including server side code in between reduces the possibility of code modularity and maintanence.

[Vibhor Dube]

Is there a maximum length attribute associated with this script tag? The JSON that I'm receiving through a JSP is getting trimmed after some 9500-10000 characters with 3 dots.