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     lt script id  test  type  application json  src  http   myresources stuf json  gt    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

User · Answer

Check this answer  https   stackoverflow com a 7346598 1764509    getJSON  test json   function json        console log json      this will show the info it in firebug console

User · Answer

While it s not currently possible with the script tag  it is possible with an iframe if it s from the same domain    lt iframe id  mySpecialId  src   my link to some json  onload       gt  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   gt console warn err       style  display  none    gt  lt  iframe gt    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    lt script gt      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           lt  script gt   lt  -- 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 -- gt   lt iframe src  your link to some json  onload  jsonOnLoad apply this  someCallback   style  display  none   gt  lt  iframe gt    Tested in chrome and should work in firefox  Unsure about IE or Safari

User · Answer

place something like this in your script file  json-content js  var mainjson     your json data    then call it from script tag    lt script src  json-content js  gt  lt  script gt    then you can use it in next script   lt script gt  console log mainjson   lt  script gt

User · Answer

Another alternative to use the exact json within javascript  As it is Javascript Object Notation you can just create your object directly with the json notation  If you store this in a  js file you can use the object in your application  This was a useful option for me when I had some static json data that I wanted to cache in a file separately from the rest of my app         Just hard code json directly within JS       here I create an object CLC that represents the json       scope CLC              ContentLayouts                                    ContentLayoutID   1                   ContentLayoutTitle    Right                    ContentLayoutImageUrl     Wasabi Common gfx layout right png                    ContentLayoutIndex   0                   IsDefault   true                                               ContentLayoutID   2                   ContentLayoutTitle    Bottom                    ContentLayoutImageUrl     Wasabi Common gfx layout bottom png                    ContentLayoutIndex   1                   IsDefault   false                                               ContentLayoutID   3                   ContentLayoutTitle    Top                    ContentLayoutImageUrl     Wasabi Common gfx layout top png                    ContentLayoutIndex   2                   IsDefault   false

User · Answer

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    lt script id  data  type  application json  gt  lt  php include  stuff json      gt  lt  script gt   lt script gt  var jsonData   JSON parse document getElementById  data   textContent   lt  script gt    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    lt script gt var jsonData    lt  php include  stuff json     gt   lt  script gt    The advantage of the solution with the extra tag is that JavaScript code and JSON data are kept separated from each other

User · Answer

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

User · Answer

If you need to load JSON from another domain  http   en wikipedia org wiki JSONP  However be aware of potential XSSI attacks  https   www scip ch en  labs 20160414  If it s the same domain so just use Ajax

User · Answer

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        lt script id  myJson  type  application json  gt         name   Foo       lt  script gt    lt script type  text javascript  gt        function             var x   JSON parse     myJson   html             alert x name     Foo           lt  script gt        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    Use   get  your json   or some other such AJAX method  Write a file that sets a global variable to your json   seems hokey   Pull it into an invisible iframe  then scrape the contents of that after it s loaded  I call this  1997 mode   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  lt script src    gt  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

User · Answer

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   lt head gt     lt script src  my-json js  gt  lt  script gt   lt  head gt   lt body onload  document getElementById  json-holder   innerHTML   JSON stringify myJSON    gt     lt div id  json-holder  gt  lt  div gt   lt  body gt

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

Examples related to javascript

Examples related to json

Examples related to html

Examples related to script-tag