Twitch project using twitch search api

Twitch project using twitch search api
0

#1

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.


#2

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);
          }
        }
      });

#3

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!


#4

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.


#5

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.


#6

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