Html/javascript: how to access JSON data loaded in a script tag with src set

From the trenches: accessing JSON data

Navigating the choppy seas of JSON data can steer developers into unique situations. Here's a map to avoid straying into the Bermuda Triangle of confusing code.

Server-side scripting for inline embedding

One efficient method to include and instantly access JSON data in your web app is server-side scripting for inline embedding:

<script type="application/json" id="jsonData">
  // JSON data goes here
</script>
<script>
  var data = JSON.parse(document.getElementById('jsonData').textContent);
  // data now behaves like a domesticated JavaScript object
</script>


This approach prevents supplementary HTTP requests, and stores your JSON data on call like a loyal service dog.

The invisible iframe: synchronous loading

When the seas are rough and you need your JSON data right after the page load, resort to the trusty iframe:

<iframe src="data.json" id="jsonIframe" style="display:none;"></iframe>
<script>
  document.getElementById('jsonIframe').onload = function() {
    var jsonData = JSON.parse(this.contentWindow.document.body.textContent.trim());
    // jsonData is up for grabs! (crime not included)
  };
</script>


Here, we've hidden an iframe loaded with the JSON data, so it's synchronized like an Olympic swim team. However, don't forget to check for cross-browser compatibility and ensure proper error handling.

Asynchronously ordered JSON: Fetch API and XMLHttpRequest

For asynchronous scenarios where JSON data can hang out backstage before making its grand appearance, the Fetch API or XMLHttpRequest come into play:

// Fetch API example:
fetch('data.json')
  .then(response => response.json())
  .then(data => console.log(data)) // Data on the red carpet
  .catch(error => console.error('Oops:', error)); // If the red carpet catches fire

// XMLHttpRequest example:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var jsonData = JSON.parse(xhr.responseText);
    // jsonData is now ready for a dance
  }
};
xhr.send();


This way, JSON data gets requested after the page load, then processed once retrieved. Perfect for when the stage needs setting!

Global variable: setting the JSON stage

Another technique - a trick as good as anything you'd see at Hogwarts, is serving a JavaScript file that sets a global variable to your JSON:

// On the server side:
var globalJsonData = {...}; // JSON data goes here


Load this script in with a normal script tag, and globalJsonData becomes your backstage pass to JSON data.

Clean ship: maintainability and separation of concerns

Though these techniques can get the job done, remember the pirate code: keep your JSON data and JavaScript code separate for clarity and maintainability. This way, you avoid confusing treasure maps in the future.

Choosing the weapon for your duel

Tailor the approach to your project's needs. Inline embedding, iframes or asynchronous requests, each tool in your arsenal has its strength. Always be prepared with error handling, and perform cross-browser testing. No sailor wants to hit unexpected rocky shores!