Twitch project using twitch search api

I’m working on the twitch project, trying to implement an additional feature using twitch’s search api, pen here and I keep getting “Not Found” error. I’m using a callback function in the url to handle CORS (from what I’ve researched that should handle it) but to no resolution. If I paste the url to my browser address bar I get “Bad Request” but without the “callback=?” I do get the JSON I expect. Furthermore, I am able to get non-search api results that I expect using callback=? in the url (which seems to support that
CORS is being handled).

Search api url example: https://api.twitch.tv/kraken/search/streams?q=world_of_warcraft&callback=? (doesn’t work in codepen with or without the callback=? ending, works in browser without.)

Other api url example: https://api.twitch.tv/kraken/streams/freecodecamp? (works in codepen with the callback=? ending, works in browser without.)

p.s. When you check the pen, the portion of the code pertaining to this question may be commented out so I can move on with the basic project in the meanwhile. The comment will start with “SEARCH”. Just uncomment to test the error/solutions.

Thanks for any help!

Edit: With the help of the twitch forums, I found the solution to my problem. Just to pass on the bit I found most helpful: My problem was discovered using the Network tab of the developer tools which revealed the url wasn’t being passed to getJSON. That and I wasn’t correctly accessing the JSON object.

I’m no expert, but one thing I did notice is that you don’t have a “success” property in your Ajax call to give directions when the data is received. Here is an example:

function getData(url, username) {
      $.ajax({
        dataType: "jsonp",
        url: url,
        success: function(data) {
          // test whether the user exists. 
          if (typeof data.stream !== "undefined") {
            data.stream !== null ? status.onlineDisplay(data) : status.offlineRequest(data);
          } else {
            status.noUserDisplay(username);
          }
        }
      });
1 Like

Thanks for the quick reply. Using jquery’s .getJSON covers up some of the ajax going on behind the scene. The callback function in the getJSON (i.e., in my example, function(data){…stuff…}) is the success function, just without needing to explicitly call it success.

But thanks anyway!

Ok, I see that now. $.getJSON is the shorthand version of $.ajax. That being said, you may have to use the $.ajax method as I don’t see any way to change the data type to JSONP using the abbreviated version. This may be why I chose this method as well. You will have to use JSONP for CORS.

I may give that a shot. Until now, simply adding “&callback=?” to the end of the url in getJSON has handled the JSON-P/CORS issues, just not for this particular instance.

I am not currently using the other API that was recommended for us to use. Any advice on how to tackle this challenge because I have been finding myself very unprepared for this project