0

Having real trouble trying to get this work. I am trying to pull data from the IGDB API using AJAX, as I plan to use the data to populate an auto complete search field. However I'm aware this is a cross-origin request and requires the data type to be 'jsonp'. The problem is, that when I get a response back I get an error that looks like the following:

jsonp error

From what I understand, this error is because the response from the 3rd party server isn't JSONP but JSON which is different from what is expected. This correct?

Is there a way I can retrieve the data from the above linked service and extract the data out to fill the auto complete field?

Current code:

$("#game-autocomplete").autocomplete({
    source: function (request, response) {

        var auth = "&token=MyAuthToken";

        $.ajax({
            url: "https://www.igdb.com/api/v1/games/search?q=" + request.term + auth,
            dataType: "jsonp",
            success: function (data) {
                response($.map(data, function (value, key) {
                    return {
                        label: value,
                        value: key
                    };
                }));
            }
        });
    }
});
Luke Stoward
  • 1,480
  • 14
  • 24
  • 2
    You can not make a json response turn into jsonp if they do not support it. If they do not support CORS than the only solution is a serverside proxy. – epascarello Feb 17 '16 at 18:26
  • 2
    A "JSONP response" is a *response that is an executable script*. If the server doesn't respond with an executable script, the server is not participating in JSONP. – apsillers Feb 17 '16 at 18:37
  • The fact that you have to include an auth token in the request is a huge red flag. Generally those are meant to be kept away from the client where it can be easily stolen and abused. – Kevin B Feb 17 '16 at 18:41
  • I removed my answer on how to handle the response data and put it in an auto complete data set (the question) and await the down voters answers on what should be a revised question re: json vs jsonp responses. – Mark Schultheiss Feb 17 '16 at 18:45
  • @MarkSchultheiss the answer is "you're doing it wrong, and no amount of front-end code will make it right.", kinda hard to make a useful answer. – Kevin B Feb 17 '16 at 18:46
  • @MarkSchultheiss Just to help clarify things based on your answer's last comment: you thought the question was asking about "how to handle the response" but the most important part of the question asks "Is there a way I can retrieve the data from the above linked service...?". In this case, the impediment to retrieving the data is the same-origin policy. To answer the question, then, it is necessary to discuss how to avoid offending the same-origin policy in this case. – apsillers Feb 17 '16 at 18:48
  • Perhaps http://stackoverflow.com/questions/21715620/using-jsonp-to-get-json-data-from-another-server for the CORS part under discussion or this http://stackoverflow.com/questions/9519209/how-do-i-set-up-jsonp another here http://stackoverflow.com/questions/9348818/how-to-set-my-local-javascript-variable-as-a-json-data-on-remote-website – Mark Schultheiss Feb 17 '16 at 19:36
  • Thanks for the replies, I have actually been in touch with the creators of the API and they have said they plan to add support for JSONP in the near future. So this should solved my problem when they implement it. In the mean time however I will have to do without. Cheers. – Luke Stoward Feb 17 '16 at 22:25

0 Answers0