How can I read a JSON in the script-tag from JavaScript?
I ended up with this JavaScript code to be independent of jQuery.
var jsonElement = document.getElementById('json-script-tag');
var myObject = JSON.parse(jsonElement.textContent);
I would change the script declaration to this:
<script id="data" type="application/json">{"org": 10, "items":["one","two"]}</script>
Note type and id fields. After that
var data = JSON.parse(document.getElementById('data').textContent);
will work just fine in all browsers.
The type="application/json"
is needed to prevent browser from parsing it while loading.
And the reason why we use textContent
instead of innerHTML
or innerText
to read the raw Json text is because innerHTML
tries to parse the contents as HTML which will lead to slower performance and possible parsing bugs and XSS attacks, and innerText
won't grab the raw text and will instead look for human-visible text, whereas textContent
grabs the pure text as-is (which is what you want). See https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent for more details about why innerHTML
and innerText
are bad.