Menu
Hi I am trying to load local JSON file using JQuery to show data but i am getting some weird error. May i know how to solve this.
<html> <head> <script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) { $.getJSON( "priorities.json" , function( result ){ alert(result.start.count); }); }); </script></head> </html> I am just alerting the count of JSON data. My JSON file is in the same directory where this html file is and JSON string format is shown below.
{ "start": { "count": "5", "title": "start", "priorities": [ { "txt": "Work" }, { "txt": "Time Sense" }, { "txt": "Dicipline" }, { "txt": "Confidence" }, { "txt": "CrossFunctional" } ] } } JSON file name priorities.json and error is
Uncaught Referenceerror priorities is not defined
709
The jQuery code uses getJSON() method to fetch the data from the file's location using an AJAX HTTP GET request. It takes two arguments. One is the location of the JSON file and the other is the function containing the JSON data. The each() function is used to iterate through all the objects in the array.
Projects In JavaScript & JQuery To load JSON data using jQuery, use the getJSON() and ajax() method. The jQuery. getJSON( ) method loads JSON data from the server using a GET HTTP request. data − This optional parameter represents key/value pairs that will be sent to the server.
Due to security issues (same origin policy), javascript access to local files is restricted if without user interaction.
According to https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs:
A file can read another file only if the parent directory of the originating file is an ancestor directory of the target file.
Imagine a situation when javascript from a website tries to steal your files anywhere in your system without you being aware of. You have to deploy it to a web server. Or try to load it with a script tag. Like this:
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript" language="javascript" src="priorities.json"></script> <script type="text/javascript"> $(document).ready(function(e) { alert(jsonObject.start.count); }); </script> Your priorities.json file:
var jsonObject = { "start": { "count": "5", "title": "start", "priorities": [ { "txt": "Work" }, { "txt": "Time Sense" }, { "txt": "Dicipline" }, { "txt": "Confidence" }, { "txt": "CrossFunctional" } ] } } Or declare a callback function on your page and wrap it like jsonp technique:
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"> </script> <script type="text/javascript"> $(document).ready(function(e) { }); function jsonCallback(jsonObject){ alert(jsonObject.start.count); } </script> <script type="text/javascript" language="javascript" src="priorities.json"></script> Your priorities.json file:
jsonCallback({ "start": { "count": "5", "title": "start", "priorities": [ { "txt": "Work" }, { "txt": "Time Sense" }, { "txt": "Dicipline" }, { "txt": "Confidence" }, { "txt": "CrossFunctional" } ] } }) Using script tag is a similar technique to JSONP, but with this approach it's not so flexible. I recommend deploying it on a web server.
With user interaction, javascript is allowed access to files. That's the case of File API. Using file api, javascript can access files selected by the user from <input type="file"/> or dropped from the desktop to the browser.
129
You can simply include a Javascript file in your HTML that declares your JSON object as a variable. Then you can access your JSON data from your global Javascript scope using data.employees, for example.
index.html:
<html> <head> </head> <body> <script src="data.js"></script> </body> </html> data.js:
var data = { "start": { "count": "5", "title": "start", "priorities": [{ "txt": "Work" }, { "txt": "Time Sense" }, { "txt": "Dicipline" }, { "txt": "Confidence" }, { "txt": "CrossFunctional" }] } } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
