Render remote json

Question

I am trying to show json data with pure.js. It works when the json is hardcoded right in the page but doesn't when I try to get the actual live json from my url. Please help me connect to the live json via my url.

my URL

my fiddle

<script src="http://beebole.com/pure_git/libs/pure.js"></script>

<p>Item: <span id="item" class="item"></span></p>
<p>Count: <span id="count" class="count"></span></p>
<p>Group: <span id="group" class="group"></span></p>

// Hard coded - works
var data = {"item":"chm","count":1,"group":"truthsponsors"}

$.getJSON('http://arbitrarycounter.com/vb/truthsponsors/chm/', function(data) {
    // My attempt to retrieve the live json - doesn't work
});

$('#item').autoRender(data);
$('#count').autoRender(data);
$('#group').autoRender(data);

*Cross origin sharing has been enabled on the server.

On one hand, you have to move that has to access the data *into* the Ajax callback. On the other side, if the page is not served from the same domain you are trying to access the data from, then you might be subject to the same origin policy (e.g. the jsFiddle demo is). — Felix Kling, Jul 22 '13 at 16:04
possible duplicate of [Ways to circumvent the same-origin policy](http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy) — Quentin, Jul 22 '13 at 16:04
@Quentin this isn't a duplicate - at least, not a dupe of the question you've given. to close as duplicate, it should be _the same question_ and _not only (potentially) lead to the same answer_. — oezi, Jul 22 '13 at 16:13
UPDATE: The web service I'm trying to use has just updated their server to permit cross origin resource sharing. How does this affect this question? — Justice Gödel Conder, Jul 22 '13 at 19:59
@YotamOmer why? It has a deep meaning! Well... ok, after all it was a bad idea to use a common name, but the acronym was so good in the unobtrusive 2008. Yahoo just made the same mistake, but today. — Mic, Jul 23 '13 at 11:45

prothid · Answer 1 · 2013-07-22T17:39:27.997

What Felix and Quentin commented is accurate. You're running into same-origin policy issues.

Add ?callback=? to the end of the URL you're fetching. The ? will be replaced with the name of an internal jQuery callback function. Have your back end script use the value of the callback parameter to make a function call with the return data. You'll then have access to that data in the success handler function.

Example:

$.getJSON('http://arbitrarycounter.com/vb/truthsponsors/chm/?callback=?', function(data) {
    // My attempt to retrieve the live json - doesn't work
    console.log(data);
});

If callback is set to json1341254215 then you should return:

json1341254215({"item":"chm","count":1,"group":"truthsponsors"});

Also, don't forget to set the content-type at the top of your back end script:

header('Content-type: application/'.(strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' ? 'json' : 'javascript'));

score 1 · Answer 2 · answered Jul 22 '13 at 20:16

With CORS enabled, you can get the data as easy as pie. See: http://enable-cors.org/

<script src="http://beebole.com/pure_git/libs/pure.js"></script>

<p>Item: <span id="item" class="item"></span></p>
<p>Count: <span id="count" class="count"></span></p>
<p>Group: <span id="group" class="group"></span></p>

$.getJSON('http://arbitrarycounter.com/vb/truthsponsors/chm/', function(data) {
    $('#item').autoRender(data);
    $('#count').autoRender(data);
    $('#group').autoRender(data);
});

Updated Fiddle

Render remote json

2 Answers2