Get a JSON file from URL and display

After so many months of search, I found the solution. Hence, I am answering my own question.

When JSON is not supported and when we are stuck with Same Origin Policy, we have to wrap around our JSON with a padding and make it a JSONP.

To do that, we have a life saving website http://anyorigin.com/

You can paste your URL and get the corresponding JQuery code something like this,

$.getJSON('http://anyorigin.com/get?url=http%3A//webapp.armadealo.com/home.json&callback=?', function(data){$('#output').html(data.contents);});

If you want to use your own code, then just use the URL from the code above, which is

http://anyorigin.com/get?url=http%3A//webapp.armadealo.com/home.json&callback=?

This above URL will give you the same JSON data as JSONP and solves all the trouble.

I had used the following code, which on success calls displayAll function

$.ajax({        url: 'http://anyorigin.com/get?url=http%3A//webapp.armadealo.com/home.json&callback=?',        type: 'GET',        dataType: "json",        success: displayAll    });function displayAll(data){    alert(data);}

If you look in Chrome inspector, you probably see this error:

XMLHttpRequest cannot load http://webapp.armadealo.com/home.json. Origin http://stackoverflow.com is not allowed by Access-Control-Allow-Origin.

What this means is that the server doesn't want the client web page reading the file. The client isn't trusted. This is a basic security feature of XMLHttpRequest in order to prevent a site like mybank.evil.com from downloading data from mybank.com. It unfortunately makes testing from a local file challenging.

If you trust any site with your data or a select number of sites, you can configure your server script to send the Access-Control-Allow-Origin to allow certain sites through.

See https://developer.mozilla.org/en/http_access_control for more details.

It should work.

1. Have you watched the request in firebug or another debug console, what happens and what the response is returned?

2. Please consider the same-origin-policy, so the script which makes this request, should also be loaded from webapp.armadealo.com. If not, you need a jsonp-request. Look at: http://api.jquery.com/jQuery.ajax/