What is the easiest way to access my JSON data within my script?

Question

What is the easiest way to access my JSON data within my script?

My file structure looks like this

app/
  index.html
  script.js
  data.json

Does that make sense? Now, I want to randomly select an object from my JSON data and display it to the user each time the document loads. However, I'm facing an issue with efficiently accessing the data from my data.json. Using XMLHttpRequest() or the fetch API seems like overkill for such a simple task. I mean, you don't need to send an HTTP request to link your CSS and HTML files, right?

I've tried linking my data using

<script id="data" src="./data.json" type="application/json"></script>

but it didn't work as expected. A workaround I found was renaming data.json to data.js, adding a var data = prefix to the JSON data, and importing it into index.html. This method feels hacky and not optimal.

It seems like there may be some issues related to CORS/Same-origin that I don't fully understand. Can someone provide a detailed explanation on why an HTTP request is necessary to access a local file? Why can't we simply link our JSON data like we do with HTML, CSS, and JS files using link/script tags?

javascript json

Answer 1

Answer №1

Here are three different strategies that can be employed:

1) Retrieve the data from a `.json` file using Fetch or XHR

The standard method for a web document to fetch a .json file from the server is through the use of the Fetch API or XHR.

fetch('/app/data.json')
  .then(response => response.json())
  .then(json => console.log(json));

2) Opt for a `.js` file instead of a `.json` file

One alternative approach is to upload a .js file to the server rather than a .json file. For instance, consider transforming your JSON data like so:

{"Name" : "Data", "Section 1" : {"A" : "a", "B" : "b"}, "Section 2" : ["C", "D"]}

Your JS file would then appear as follows:

let myJSONData = '{"Name" : "Data", "Section 1" : {"A" : "a", "B" : "b"}, "Section 2" : ["C", "D"]}';

This JavaScript file can be linked in your document with:

<script src="/app/my-json-data.js"></script>

3) Integrate the `.json` file into the document (using `<object>` or `<iframe>`)

An additional method involves embedding the .json file within the document utilizing <object> or <iframe>:

Utilizing HTML5 `<embed>`

<embed> seems to have restricted access to its contentDocument, though it's unclear why.

Utilizing HTML5 `<object>`

HTML:

<object data="/app/data.json" style="display: none"></object>

JS:

<script>
let myObject = document.getElementsByTagName('object')[0];

const getJSONFromObject = () => {
  console.log(myObject.contentDocument.body.textContent);
}

myObject.addEventListener('load', getJSONFromObject);
</script>

Utilizing HTML5 `<iframe>`

HTML:

<iframe src="/app/data.json" style="display: none"></iframe>

JS:

<script>
let myIframe = document.getElementsByTagName('iframe')[0];

const getJSONFromIframe = () => {
  console.log(myIframe.contentDocument.body.textContent);
}

myIframe.addEventListener('load', getJSONFromIframe);
</script>

In terms of personal preference, the ranking of these approaches would be:

Fetch the .json file
XHR the .json file
Utilize a .js file rather than a .json file
Embed the .json in the document via <object>

Answer 2

Here are three different strategies that can be employed:

1) Retrieve the data from a `.json` file using Fetch or XHR

The standard method for a web document to fetch a .json file from the server is through the use of the Fetch API or XHR.

fetch('/app/data.json')
  .then(response => response.json())
  .then(json => console.log(json));

2) Opt for a `.js` file instead of a `.json` file

One alternative approach is to upload a .js file to the server rather than a .json file. For instance, consider transforming your JSON data like so:

{"Name" : "Data", "Section 1" : {"A" : "a", "B" : "b"}, "Section 2" : ["C", "D"]}

Your JS file would then appear as follows:

let myJSONData = '{"Name" : "Data", "Section 1" : {"A" : "a", "B" : "b"}, "Section 2" : ["C", "D"]}';

This JavaScript file can be linked in your document with:

<script src="/app/my-json-data.js"></script>

3) Integrate the `.json` file into the document (using `<object>` or `<iframe>`)

An additional method involves embedding the .json file within the document utilizing <object> or <iframe>:

Utilizing HTML5 `<embed>`

<embed> seems to have restricted access to its contentDocument, though it's unclear why.

Utilizing HTML5 `<object>`

HTML:

<object data="/app/data.json" style="display: none"></object>

JS:

<script>
let myObject = document.getElementsByTagName('object')[0];

const getJSONFromObject = () => {
  console.log(myObject.contentDocument.body.textContent);
}

myObject.addEventListener('load', getJSONFromObject);
</script>

Utilizing HTML5 `<iframe>`

HTML:

<iframe src="/app/data.json" style="display: none"></iframe>

JS:

<script>
let myIframe = document.getElementsByTagName('iframe')[0];

const getJSONFromIframe = () => {
  console.log(myIframe.contentDocument.body.textContent);
}

myIframe.addEventListener('load', getJSONFromIframe);
</script>

In terms of personal preference, the ranking of these approaches would be:

Fetch the .json file
XHR the .json file
Utilize a .js file rather than a .json file
Embed the .json in the document via <object>

What is the easiest way to access my JSON data within my script?

Answer №1

1) Retrieve the data from a `.json` file using Fetch or XHR

2) Opt for a `.js` file instead of a `.json` file

3) Integrate the `.json` file into the document (using `<object>` or `<iframe>`)

Utilizing HTML5 `<embed>`

Utilizing HTML5 `<object>`

Utilizing HTML5 `<iframe>`

Similar questions

configuration of file types

Importing text data from a text file in Java or jQuery without the need for a web server

The validation of the JSON schema reveals no discrepancies

Having trouble rendering JSON encoded data in a JqPlot Chart within a PHP script

"Auth.currentSession is indicating that there is no user currently logged in

Conceal certain components when a user is authenticated

Retrieving table information using javascript

Can you explain the purpose of CLOUDINARY_DEFAULT_URL and CLOUDINARY_DEFAULT_PUBLICID to me?

Having trouble retrieving data from an API URL in JSON format using the Flutter framework

Sending Svelte data to Javascript with an onclick event

Issue with specific route causing server to throw 500 error

Access to PHP script (IF) unattainable following a POST occurrence

Tips for eliminating corner indexes from a 2D array?

JavaScript - The function will not execute any code inside its body

Retrieve filled out form fields in ServiceM8

Switching the delimiter for JSON queries using Json.net

Fixing the Jquery animation glitch triggered by mouseover and mouseout

Adjusting the height of an element as you scroll will activate the scroll event

Exporting a table in Quasar to JSON format

Tips for preloading a script in nextjs

What is the easiest way to access my JSON data within my script?

Answer №1

1) Retrieve the data from a .json file using Fetch or XHR

2) Opt for a .js file instead of a .json file

3) Integrate the .json file into the document (using <object> or <iframe>)

Utilizing HTML5 <embed>

Utilizing HTML5 <object>

Utilizing HTML5 <iframe>

Similar questions

configuration of file types

Importing text data from a text file in Java or jQuery without the need for a web server

The validation of the JSON schema reveals no discrepancies

Having trouble rendering JSON encoded data in a JqPlot Chart within a PHP script

"Auth.currentSession is indicating that there is no user currently logged in

Conceal certain components when a user is authenticated

Retrieving table information using javascript

Can you explain the purpose of CLOUDINARY_DEFAULT_URL and CLOUDINARY_DEFAULT_PUBLICID to me?

Having trouble retrieving data from an API URL in JSON format using the Flutter framework

Sending Svelte data to Javascript with an onclick event

Issue with specific route causing server to throw 500 error

Access to PHP script (IF) unattainable following a POST occurrence

Tips for eliminating corner indexes from a 2D array?

JavaScript - The function will not execute any code inside its body

Retrieve filled out form fields in ServiceM8

Switching the delimiter for JSON queries using Json.net

Fixing the Jquery animation glitch triggered by mouseover and mouseout

Adjusting the height of an element as you scroll will activate the scroll event

Exporting a table in Quasar to JSON format

Tips for preloading a script in nextjs

1) Retrieve the data from a `.json` file using Fetch or XHR

2) Opt for a `.js` file instead of a `.json` file

3) Integrate the `.json` file into the document (using `<object>` or `<iframe>`)

Utilizing HTML5 `<embed>`

Utilizing HTML5 `<object>`

Utilizing HTML5 `<iframe>`