Twitch.tv fcc api workaround is not working

JavaScript
1

hi im trying to complete twitch.tv challenge and am using the api workaround suggested by fcc but it doesnt seem to be working. I am referring to number 9 in the project’s descripiton/instructions:

“UPDATE: Due to a change in conditions on API usage explained here Twitch.tv now requires an API key, but we’ve built a workaround. Use https://wind-bow.gomix.me/twitch-api instead of twitch’s API base URL (i.e. https://api.twitch.tv/kraken ) and you’ll still be able to get account information, without needing to sign up for an API key.”

Here is my js code:

$(document).ready(function(){
  var online;
  var offline;
  var all;
  var fcc;
  var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
  var channelName;
  var channelID;
  var channelLogo;
  var streamingInfo;
  var channelURL;
  
  $.each(channels, function (i, val) {
    
    $.getJSON("https://wind-bow.gomix.me/twitch-api/streams/" + val, function (st) {
    
      channelName = val;
      
      if (st.stream == null) {
      
        $.getJSON("https://wind-bow.gomix.me/twitch-api/channels/" + channelName, function (ch) {
          
          channelID = channel.display_name;
          channelLogo = channel.logo;
          streamingInfo = channel.status;
          channelURL = channel.url;
          
          if (channel.status == '404') {
            
            $("#invalid").append(channel.message);
          
          }  else if (st.stream == null) { 
           
            $("#offline").html('"' + channelLogo + '"');    
            
          } else  {
            
          $.getJSON("#online").html('"' + channelID + '"');
      }
    });
  }
});
  });
});

This is the message I get from the browser’s console when I am trying to run my code:
" Failed to load https://wind-bow.gomix.me/twitch-api/streams/storbeck: Redirect from ‘https://wind-bow.gomix.me/twitch-api/streams/storbeck’ to ‘https://wind-bow.glitch.me/twitch-api/streams/storbeck’ 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. "

How I can fix this?
Any help is appreciated, thank you!

2

Hi ! Looks like you missed the ?callback=? part in the end of the link.

That’s part of the workaround.

Example, You’d call the link like

$.getJSON("https://wind-bow.gomix.me/twitch-api/channels/" + channelName + "?callback=?", function (ch) { ...

Hope it Helps! 😃
1 Like
3

thanks a lot its good now :grin:

4

It’s a library that probably you must include in your project…

It’s required to be included as wrote in Bootstrap documentation:

(Always check official documentations of everything :wink: )

Bootstrap installing docs:

Make sure you get used to read docs and install thing properly!

So, you must include:


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
1 Like
5

Still doesn’t work for me. I’m getting CORS error.

function twtch() {
var url = 'https://wind-bow.gomix.me/twitch-api/streams/ESL_SC2?callback=?';
var get = new XMLHttpRequest();
console.log('UNSENT ',get.readyState);
	get.open("GET", url, true),
	console.log('OPENED ',get.readyState);
	//get.setRequestHeader('application', 'vnd.twitchtv.v5+json'),
	get.send(null),
	console.log('HEADERS_RECEIVED ',get.readyState);
	get.onreadystatechange = function () {
	console.log('LOADING? ',get.readyState);
		if (get.readyState === 4 && (get.status === 200)) {
			var data = JSON.parse(get.responseText), html = '';
				function print() {				
					for (var i = 0; i < data.data.length; i++) {
					let width = 400, height = 400;
					html += '<li class="feature-box">'+data.data[i].user_id+'</li><li>'+data.data[i].title+'</li>';	
					}
			html += '<ul>';				
			document.getElementById('twitchy').innerHTML += html;
			
			}
			html += '</ul>';
			print();
		}
	}
}

I’m getting 301 redirect, but “no response data” and the following error message in console:

Failed to load https://wind-bow.gomix.me/twitch-api/streams/ESL_SC2?callback=?: Redirect from 'https://wind-bow.gomix.me/twitch-api/streams/ESL_SC2?callback=?' to 'https://wind-bow.glitch.me/twitch-api/streams/ESL_SC2?callback=?' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.