Question

I am passing a variable into a URL, which then calls an API filtered by the variable passed. However, I can’t seem to get the JSON to load, and returns an Invalid Error in Console of Firebug in JS. Thoughts?

$("a").click(function() {
    var apiurl = "http://api.example.com" + $(this).text() + "&limit=500" + "?callback=?";

    $.ajax({
        url: apiurl,
        success: function(json) {alert(json.data.results);},
        error: function() { alert("error"); },
        dataType: "json",
        contentType: "application/json;charset=utf-8",
    });
});

This is the error:
invalid label
error source line:
[Break On This Error]
{“code”:200,”status”:”Ok”,”data”:{“offset”:0,”limit”:500,”total”:17,”target”:”ch…

Answer 1

Remove: contentType: "application/json;charset=utf-8" from your request. Also you could use the $.getJSON() method which is a shorthand for what you have written. And don’t forget to return false from your click handler otherwise your call might never have time to execute before the browser redirects away following the href of the anchor that’s being clicked. Another thin go to notice is that you should use '&callback=?' instead of '?callback=?' in the url because apparently you already have the limit query string parameter so you are just adding another one. I suppose in this case that $(this).text() contains somewhere the ? which indicates the start of the query string:

$('a').click(function() {
    var apiurl = 'http://api.example.com' + $(this).text() + '&limit=500' + '&callback=?';
    $.getJSON(apiurl, function(json) {
        alert(json.data.results);
    });
    return false;
});

Also I hope you realize that callback=? means JSONP that the API that you are trying to invoke must support. Otherwise your call will always be failing because you are violating the same origin policy restriction.