How can I get javascript to read from a .json file?
Assuming you mean "file on a local filesystem" when you say .json file.
You'll need to save the json data formatted as jsonp, and use a file:// url to access it.
Your HTML will look like this:
<script src="file://c:\\data\\activity.jsonp"></script><script type="text/javascript"> function updateMe(){ var x = 0; var activity=jsonstr; foreach (i in activity) { date = document.getElementById(i.date).innerHTML = activity.date; event = document.getElementById(i.event).innerHTML = activity.event; } }</script>And the file c:\data\activity.jsonp contains the following line:
jsonstr = [ {"date":"July 4th", "event":"Independence Day"} ];
NOTICE: AS OF JULY 12TH, 2018, THE OTHER ANSWERS ARE ALL OUTDATED. JSONP IS NOW CONSIDERED A TERRIBLE IDEA
If you have your JSON as a string, JSON.parse() will work fine. Since you are loading the json from a file, you will need to do a XMLHttpRequest to it. For example (This is w3schools.com example):
var xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var myObj = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myObj.name; }};xmlhttp.open("GET", "json_demo.txt", true);xmlhttp.send();<!DOCTYPE html><html><body><h2>Use the XMLHttpRequest to get the content of a file.</h2><p>The content is written in JSON format, and can easily be converted into a JavaScript object.</p><p id="demo"></p><p>Take a look at <a href="json_demo.txt" target="_blank">json_demo.txt</a></p></body></html>It will not work here as that file isn't located here. Go to this w3schools example though: https://www.w3schools.com/js/tryit.asp?filename=tryjson_ajax
Here is the documentation for JSON.parse(): https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
Here's a summary:
The JSON.parse() method parses a JSON string, constructing the JavaScript value or object described by the string. An optional reviver function can be provided to perform a transformation on the resulting object before it is returned.
Here's the example used:
var json = '{"result":true, "count":42}';obj = JSON.parse(json);console.log(obj.count);// expected output: 42console.log(obj.result);// expected output: trueHere is a summary on XMLHttpRequests from https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest:
Use XMLHttpRequest (XHR) objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing. XMLHttpRequest is used heavily in Ajax programming.
If you don't want to use XMLHttpRequests, then a JQUERY way (which I'm not sure why it isn't working for you) is http://api.jquery.com/jQuery.getJSON/
Since it isn't working, I'd try using XMLHttpRequests
You could also try AJAX requests:
$.ajax({ 'async': false, 'global': false, 'url': "/jsonfile.json", 'dataType': "json", 'success': function (data) { // do stuff with data }});Documentation: http://api.jquery.com/jquery.ajax/
You can do it like...Just give the proper path of your json file...
<!doctype html><html> <head> <script type="text/javascript" src="abc.json"></script> <script type="text/javascript" > function load() { var mydata = JSON.parse(data); alert(mydata.length); var div = document.getElementById('data'); for(var i = 0;i < mydata.length; i++) { div.innerHTML = div.innerHTML + "<p class='inner' id="+i+">"+ mydata[i].name +"</p>" + "<br>"; } } </script> </head> <body onload="load()"> <div id= "data"> </div> </body></html>Simply getting the data and appending it to a div... Initially printing the length in alert.
Here is my Json file: abc.json
data = '[{"name" : "Riyaz"},{"name" : "Javed"},{"name" : "Arun"},{"name" : "Sunil"},{"name" : "Rahul"},{"name" : "Anita"}]';