Twitch tv app js help

JavaScript
1

I am not sure what am doing wrong but my when I click on the menu the channels don’t show up. Can someone please help.

thanks,
Nadia

2

I see some channels showing up. What are you not seeing that you think you should?

3

Hi Kevin,
None of the three channels that I had hard coded (“freecodecamp”, ‘esl_sc2’, “cretetion”). I don’t know where the channels that are showing up came from.
Nadia

4

OK, taking a closer look…

First of all, I hate it when people come in with these complex pages when they haven’t even figured out how the JS is going work. It would be like trying to build a car by choosing the paint color and worrying about whether or not you understand how engines and transmissions work later.

I say, work on the JS first, at least enough to make sure that you know how to get what you want. To me, everything else is just a distraction until then.

So, I pare your program down to the basic first step:

$(document).ready(function(){
  var streamChannels = [ "freecodecamp", 'esl_sc2', "cretetion"];

  // initalization
  streamChannels.forEach(function(e){
    getInfo(e, "streams");
  });

  // API
  function getInfo(streamChannels, options) {
    $.ajax({
      type: "GET",
      url: "https://wind-bow.gomix.me/twitch-api/" + options  + "/" + streamChannels  ,
      crossDomain: true, 
      dataType: "json",
      success: function (data1) {
        console.log('success! data1:', data1)
      }
    });
  }
});

I want to see if I can get some basic info back. When I look at your browser console, I see errors. Are you using your browser console? It’s the most valuable tool a front-end dev has. It opens with ctrl-shft-j, or something similar. I see:

Failed to load https://wind-bow.gomix.me/twitch-api/streams/freecodecamp: Redirect from ‘https://wind-bow.gomix.me/twitch-api/streams/freecodecamp’ to ‘https://wind-bow.glitch.me/twitch-api/streams/freecodecamp’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://s.codepen.io’ is therefore not allowed access.

I see one for each username we are trying to access. Are you familiar with CORS? If not, google it, watch some youtube videos, etc. It is an important concept. And it can be a big pain in the butt. But the more you know about it, the less a pain in the butt it will be.

Using a different API, I was able to get the information:

$(document).ready(function(){
  var streamChannels = [ "freecodecamp", 'esl_sc2', "cretetion"];

  // initalization
  streamChannels.forEach(function(e){
    getInfo(e, "streams");
  });

  // API
  function getInfo(streamChannels, options) {
    $.getJSON("https://wind-bow.glitch.me/twitch-api/" + options  + "/" + streamChannels, function (data1) {
        console.log('success! data1:', data1)
      }
    );
  }
});

If you insist on using $.ajax, then this will work too:

  function getInfo(streamChannels, options) {
    $.ajax({
      type: "GET",
      url: "https://wind-bow.glitch.me/twitch-api/" + options  + "/" + streamChannels,
      dataType: "json",
      success:  function (data1) {
        console.log('success! data1:', data1)
      }
    });
  }

APIs are tough. They’re all different, they’re poorly documented, and they change with no warning.

I hope this helps you get the first step. Let me know if it doesn’t work or anything doesn’t make sense.

1 Like
5

I have made changes but it still does not seem to work. Now when I use console.log(data) nothing seems to happen.
thanks,
Nadia

6

When you run this pen you get nothing in your browser console?

Again, if something is not working, simplify it to help figure out what is wrong. Or, better yet, keep things simple as you build and test as you go.

7

Hi Kevin,
When I run the console,log in your example, the console in codepen and in my browser works however, when I create a new pen the console does not work. I even tried coping your example directly into the new pen and I did not get the same results as in your example.
thanks,
Nadia

8

Have you added jQuery? Go to settings/javascript/quick-add and add jQuery.

If you have and it still doesn’t work, please cut and paste the error message you are getting.

1 Like
9

Or provide a link to the pen you tried to recreate but doesn’t work.