Get a JSON file from URL and display

Question

The code is very simple, I do not know why it deosnt work.

This is the link to the JSON file, http://webapp.armadealo.com/home.json

Here is the code using getJSON

$.getJSON("http://webapp.armadealo.com/home.json", function(data){
alert(data);
});

I just want the code to display the whole JSON content.

Answer 1

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.

Answer 2

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/

Answer 3

From what I could tell is that your server doesn't support JSONP with their requests. For instance

var getUrl = 'http://webapp.armadealo.com/home.json';
                $.ajax({
                    url : getUrl,
                    type : 'GET',
                    dataType : 'jsonp text',
                    jsonp: 'jsonp',
                    crossDomain : true,
                    success: function() { console.log('Success!'); },
                    error: function() { console.log('Uh Oh!'); },
                });

This would say SyntaxError: invalid label. The return as you have it is not properly formatted JSONP. It has to be wrapped to work as JSONP because jQuery requires it.

So what you're getting back is correct, but it's not what you need. What you need for JSONP calls would look like this:

functionName({
  "mall": {
  "name": "South Shore Plaza",
  "city": "Braintree",
  "directory": "/assets/directory/0000/0094/show_floorplan.aspx",
  "postal_code": "02184",
  "street": "250 Granite St",
  "lng": -71.023692,
  "id": 147,
  "phone": "[phone]",
  "lat": 42.218688,
  "state": "MA"
}
});

... since what comes back currently is not valid JavaScript (by itself, and that's what it is), and that's how JSONP works, the response actually needs to be executable JavaScript.

You can get the same error by just plopping that code straight in your page in a <script> block.

If you're just after the embedding piece of data, I recommend a plugin like jQuery-oembed, to do that. If you're after the data, you'll need something on your server to process the JSON, then get the data from your server after that.

For example

so let’s say we would like to make a cross-domain using jQuery. Here is how the jQuery $.ajax call should look like:

$.ajax({
  dataType: 'jsonp',
  data: 'id=test',
  jsonp: 'jsonp_callback',
  url: 'http://www.differentdomain.com/get_data.php',
  success: function () {
    // do something
  },
});

Now on the server side (in the get_data.php file) we have to get the callback name and send the data in JSON format wrapped in the callback function. Something like this:

<?php
$jsonp_callback = $_GET['jsonp_callback'];
$data = array('1','2','3');
echo $jsonp_callback . '('.json_encode($data).');';
?>

JSONP can only be used if and when the server properly embed the response in a JavaScript function call.

Answer 4

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);
}