I am trying to get json data from: .json Then I wish to display this data in a table. The below code works when the json link points to a file already on my puter, but not when referring to a URL.
<html>
<head>
<script type="text/javascript" src=".6.2/jquery.min.js"> </script>
<script>
$(function() {
var entries = [];
var dmJSON = ".json";
$.getJSON( dmJSON, function(data) {
$.each(data.entries, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.id + "</td>" + "<td>" + f.user.username + "</td>" + "<td>" + f.message + "</td>" + "<td> " + f.location + "</td>" + "<td>" + f.at + "</td>" + "</tr>"
$(tblRow).appendTo("#entrydata tbody");
});
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="profile">
<table id= "entrydata" border="1">
<thead>
<th>ID</th>
<th>UserName</th>
<th>Message</th>
<th>Location</th>
<th>Time</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>
Any help as to why it won't load the json data is appreciated.
I am trying to get json data from: http://api.dailymile./entries.json Then I wish to display this data in a table. The below code works when the json link points to a file already on my puter, but not when referring to a URL.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>
$(function() {
var entries = [];
var dmJSON = "http://api.dailymile./entries.json";
$.getJSON( dmJSON, function(data) {
$.each(data.entries, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.id + "</td>" + "<td>" + f.user.username + "</td>" + "<td>" + f.message + "</td>" + "<td> " + f.location + "</td>" + "<td>" + f.at + "</td>" + "</tr>"
$(tblRow).appendTo("#entrydata tbody");
});
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="profile">
<table id= "entrydata" border="1">
<thead>
<th>ID</th>
<th>UserName</th>
<th>Message</th>
<th>Location</th>
<th>Time</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>
Any help as to why it won't load the json data is appreciated.
Share Improve this question edited Jul 25, 2013 at 5:26 apaul 16.2k8 gold badges49 silver badges82 bronze badges asked Jul 12, 2013 at 17:28 MaggyMaggy 552 gold badges2 silver badges6 bronze badges 2- Questions should not be removed after they have been answered, someone may encounter the same problem and benefit from the post. – apaul Commented Jul 25, 2013 at 5:26
- Do not vandalize or delete questions simply because they're solved. – Flexo - Save the data dump ♦ Commented Jul 29, 2013 at 6:09
2 Answers
Reset to default 4As aldux suggests, a simple way of accessing JSON cross-domain is to use JSONP. In your case, the server (dailymile.) does support JSONP, so you can simply add a ?callback=? parameter to your url, i.e.
var dmJSON = "http://api.dailymile./entries.json?callback=?";
$.getJSON( dmJSON, function(data) {
$.each(data.entries, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.id + "</td>" + "<td>" + f.user.username + "</td>" + "<td>" + f.message + "</td>" + "<td> " + f.location + "</td>" + "<td>" + f.at + "</td>" + "</tr>"
$(tblRow).appendTo("#entrydata tbody");
});
});
This is because the AJAX Same Origin Policy tha won't allow you to fetch data from different domains:
http://en.wikipedia/wiki/Same_origin_policy
Try this instead:
http://en.wikipedia/wiki/JSONP