0

I'm trying to use the Clipped API (http://clipped.me/api.html) that returns JSON but am running into some trouble. I'm using getJSON, and in Chrome's JS console I get these error messages:

Resource interpreted as Script but transferred with MIME type text/html: "http://clipped.me/algorithm/clippedapi.php?url=callback=jQuery1910859611126…emo-day-2013-still-looking-for-the-next-airbnb-or-dropbox/&_=1364420105379".

Uncaught SyntaxError: Unexpected identifier

Request Failed: parsererror, Error: jQuery19108596111265942454_1364420105378 was not called

And here's my JS:

var clippedAPI = "http://clipped.me/algorithm/clippedapi.php?url=[URL]callback=?";
    $.getJSON(clippedAPI, "http://pandodaily.com/2013/03/26/y-combinator-demo-day-2013-still-looking-for-the-next-airbnb-or-dropbox/" ).done(function(json) {
            console.log("JSON Data: " + json.title );
    }).fail(function(jqxhr, textStatus, error){
            var err = textStatus + ', ' + error;
            console.log("Request Failed: " + err);
    });

This is my first time trying to make something with an API or JSON at all, so I'm really not sure what to do here. I've tried Googling around but can't find anything. The data that I'm actually sending is getting cut off by this jQuery notice that appears when I add callback=?

Jake Stevens
  • 157
  • 4
  • 13
  • You need to use JSONP for cross-domain requests. I suggest using `$.ajax()` rather than a shortcut method like `$.getJSON` as you'll have a greater understanding of what you're attempting to do. Docs: http://api.jquery.com/jQuery.ajax/ – Jasper Mar 27 '13 at 21:44
  • @Jasper: `$.getJSON` makes a JSONP request if `callback` is in the URL. – Felix Kling Mar 27 '13 at 21:47
  • If you are trying to make a cross-domain request with JSONP and the endpoint does not support JSONP (or CORS), then you are out of luck. – Felix Kling Mar 27 '13 at 21:48
  • @FelixKling Hm, good to know, I'd still recommend not using the shortcut methods. But hey, sometimes you learn something when you do :). – Jasper Mar 27 '13 at 21:48
  • Is this an valid URL? http://clipped.me/algorithm/clippedapi.php?url=[URL]callback=? It appears not to me – hop Mar 27 '13 at 21:51

1 Answers1

2

Your parameter will not simply "guess" what the [URL] param is. Try this:

var clippedAPI = "http://clipped.me/algorithm/clippedapi.php";
$.ajax({
url: clippedAPI,
type: "GET",
dataType: "JSONP",
data: {
url: "http://pandodaily.com/2013/03/26/y-combinator-demo-day-2013-still-looking-for- the-next-airbnb-or-dropbox/"}
}).done(function(json) {
        console.log("JSON Data: " + json.title );
}).fail(function(jqxhr, textStatus, error){
        var err = textStatus + ', ' + error;
        console.log("Request Failed: " + err);
});

Even this fails, however, as your API endpoint does not seem to understand/support JSONP and does not provide a Access-Control-Allow-Origin header. You therefore have two choices:

  • You can reverse-proxy the API locally to get around the cross-domain issue and go through standard JSON
  • You can...ehm... get a better API? Lodge a ticket with the devs to get it sorted.
Sébastien Renauld
  • 19,203
  • 2
  • 46
  • 66
  • A locally hosted proxy is usually easy to implement. Have your JS call the locally hosted server-side script, and have that script make the API call and return the response from the API back to your JS. – Jasper Mar 27 '13 at 21:54
  • If you're using apache, mod_proxy allows you to reverse proxy it. If you're using nginx, even better, proxy_pass literally can do this out of the box! Both are extremely easy to implement assuming the modules are available. – Sébastien Renauld Mar 27 '13 at 21:56
  • I've set up an Apache server and have the site in the right place, but I'm totally lost on how to set up a reverse proxy with mod_proxy. I guess I'll have to read up more on this subject... – Jake Stevens Mar 28 '13 at 18:21
  • It's pretty simple: use `ProxyPass [source] [dest]` to define a proxy (you can use htaccess stuff to prevent it from being reached by anything other than localhost). Use `ProxyPassReverse` in addition to automatically follow redirects and rewrite URIs in headers accordingly. Remember cross-domain restrictions: same domain, *SAME PORT*. – Sébastien Renauld Mar 28 '13 at 18:48
  • It took me awhile to wrap my head around the concept, but once I figured it out it just made sense and worked. Thanks! – Jake Stevens Mar 28 '13 at 22:29