2

As the title says I'm attempting to retrieve a json from an api given by the site. I've tried a variety of things now and have gotten varied results. I want to be able to retrieve and parse the json to get the information that I want out of it. Here's what I've tried:

1) $.ajax() Code chunk (runs when a button is clicked):

  $.ajax({
            type: 'GET',
            url: url,
            dataType: 'json',
            success: function(data) {
                alert('Success!');
            }
        });

This produces a "Origin null is not allowed by Access-Control-Allow-Origin." error and does not get a response from the server (for Chrome or FF, I don't care about IE since this is a small project for my use). Looking around I thought the problem might be that I need it to be a jsonp dataType since I am trying to connect to an outside website. This lead me to try #2

2) $.ajax with jsonp dataType

$.ajax({
        type: 'GET',
        url: url,
        dataType: 'jsonp',
        success: function(data) {
            alert('Success!');
        }
    });

I also appended "&callback=?" to the end of "url" that I give to the function. Using Chrom's Dev Tool I can see a response from the server this time but the alert never displays. I used JSONLINT to confirm that the response was a proper json (it is) and I've tried setting the json to a variable so I can play with it (along the lines of initializing a variable earlier in the script tag [var response;] and trying to assign the json to it[response = data;]). This produced undefined when I tried to alert(response); later on (I don't believe the response=json; bit ever got called for some reason).

I've also tried using $.getJSON but looking at the api for it it apparently just runs $.ajax anyway (I luckily got the same responses/errors when trying json vs jsonp for $.getJSON as I did when trying $.ajax). When I try as a jsonp Chrome (FF doesn't produce this error) shows a "Unexpected Syntax Error: Unexpected token :". This makes me think that the site I'm trying to talk to doesn't have jsonp working and I can't access the third party site as just a json request. The link talks about how setting the server to return as application/json rather than text/html, like I get from my response, fixed the problem for them (but again, I'm trying to access a third party site and thus I can't access the server).

I've tried this in Chrome and FF and looked at Dev Tools/Firebug for each and seen the same thing (though FF doesn't produce the origin error, but that's apparently a bug with Chrome anyway).

Also: I've taken the json response returned and run $.parseJSON on it and been able to grab various pieces but how can I access the json once I get $.ajax/$.getJSON working?

Any thoughts/solutions would be greatly appreciated.

Community
  • 1
  • 1
Redrascal
  • 125
  • 7

5 Answers5

0

I once got the Unexpected Syntax Error: Unexpected token : error too.

It seems like the site doesn't support Cross-Domain-Loading. What API are you trying to use?

Jonny Burger
  • 922
  • 4
  • 11
0

More than likely the response is valid JSON, but not valid JSONP. The 3rd party server has to support JSONP for you to get a JSONP response. If you do not have control of the 3rd party server, your only real option is to use a server-side proxy or YQL.

Kevin B
  • 94,570
  • 16
  • 163
  • 180
0

Don't use JQuery AJAX for JSONP.

Use <script type='text/javascript' src=' URL_GOES_HERE&callback=BLAH '></script> which will surround the json object with a javascript method call, and you can then use the data from the 3rd party source.

http://en.wikipedia.org/wiki/JSONP

lukecampbell
  • 14,728
  • 4
  • 34
  • 32
  • 1
    I need to be able to dynamically change the url just slightly. I use a dropdown menu to choose what category I want to look in (end of my url is "/api/catalogue/category.json?category=" where I append the value of the selected category in the dropdown. This seems like it's a hard coded solution. Also: how do I access the json if your suggestion works? Can you give an example? – Redrascal Apr 20 '12 at 20:26
  • I tried imbedding it in the ` – Redrascal Apr 21 '12 at 17:35
0

Try the JSONP plugin. It's one of the few plugins I recommend, only because it's light and does what it should. It also allows you to check for responses other than success. Works great for JSONP, and resolved an issue I had with using a subdomain and not getting proper error responses (which subsequently just halted the code).

Get it Here.

Lazerblade
  • 1,119
  • 7
  • 17
0

Did you tried this way ?

$.getJSON( url + "?callback=?", function(data) {
    console.info(JSON.stringify(data, null, 2));
});

This is basically how I'm managing my JSONP callback to http://freegeoip.net/json/

Jiab77
  • 349
  • 3
  • 11