I just started looking into this and require some help to start off

API
1

Hey there,

I’m trying to make a list of ‘currently active streamers’ appear on my website. It should only be the few streamers I want to show, which are my team members.

After looking for an easy solution, I couldn’t find one and decided I’d have to make one myself from a scratch. I have no experience with JSON and with APIs at all, and I couldn’t find a guide that would get me enough confidence to try this out.

Would be much appreciated if someone could help me out by directing me to a decent guide or even give me enough material to play around with to figure it out myself. Right now I simply do not understand where to start.

2

The minimum requirements if you want to do this yourself is this:

  • Basic understanding of JavaScript and JavaScript objects
  • An idea of what JSON is and how it relates to JavaScript objects.
  • A method of loading JSON (JSONP to use cross-domain loading) and turning it into a javascript object.
  • My suggestion would be to look at using jQuery for simplicity. Check out jQuery.getJSON()
  • Read the documentation for the twitch API, you can find the part you need in the documentation here.

To make sure the API returns JSONP you can simply add &callback=jsonp to the end of your API url.

If you tell me how much JavaScript you know, I might be able to give you some more specific advice.

3

Thanks for the swift response, to answer your keypoints:

  • I understand basic JavaScript and Javascript objects
  • I do not have any experience with JSON
  • I have worked with JQuery before, albeit briefly
  • I’ve read the documentation, and it all seems pretty clear to me what everything does

I think my main issue is my lack of knowledge of JSON.
Your post has already helped me to the point I at least understand what I need to look into, so thank you!

4

I managed to get a working piece of code to show who are online and offline, and how many viewers.

    $(document).ready(function() {
var members = ['Herpaderpus', 'turtles_head', 'nubstep_rs', 'ardens_fide', 'newending', 'pve_bros', 'rsphilippe', 'PureIsMwaRS', 'smap51', 'iprimal_rs', 'im_mr_bloo', 'MrKnowles100', 'aikohero', 'cowsbelieve'];
var memberData = [];

$.each(members, function(index, member) {
	$.getJSON('https://api.twitch.tv/kraken/users/' + member + '?callback=?', function(d) {
		if(d.status == 404) {}
			// Member does not exist
		else {
			var data = [];
			data[0] = member;
			data[1] = d.display_name;
			$.getJSON('https://api.twitch.tv/kraken/streams/' + data[0] + '?callback=?', function(d) {
			if(d.stream != null) { 
		 	// user isn't offline
			memberData.push(data[0]);
			$( "#player" ).append( "<img src='http://pso-clan.com/twitch/lib/images/online.png'>" + "<a target='_blank' href='http://www.twitch.tv/" + data[0] + "'>" + data[1] + "</a>" + " - Viewers: " + d.stream.viewers + "<br>" );
			  }
			  else {
				  
				  $( "#offline" ).append( "<img src='http://pso-clan.com/twitch/lib/images/offline.png'>" + "<a target='_blank' href='http://www.twitch.tv/" + data[0] + "'>" + data[1] + "</a> - Offline<br>" );
				  
				  }
			})
		}
			
	})
 })

})

Now this is not the most neat and efficient code (in fact, it’s probably horrible), but it works.
There’s two things that I don’t quite understand just yet, which are:
1.The names seem to appear in random order on the webpage. Why would it shuffle?

2.Right now it just appends the text 1 by 1 when it checked a person in the members array, I rather want to make a collection of all current online users first, in the memberData array, and then go into a loop of those to add them all at once (I understand I need to save an array in an array to do that, but that’s not my problem). memberData.push(data[0]); doesn’t seem to work, and any ‘for’ loop doesn’t seem to work either.

Any help is appreciated :slight_smile:

5

To start with - you can get all the data you need through one single call to https://api.twitch.tv/kraken/streams?channel=herpaderpus,turtles_head,.…&callback=?

Then iterate over the received items instead of making a new call for each member.
For each stream that it finds, save that stream as online in some type of variable (a new array, or an object)

Also remember that all of the names need to be lower case in the query string!

1 Like
6

Thanks, I didn’t know that was possible.
Let’s say I use this call:

$.getJSON('https://api.twitch.tv/kraken/streams?channel=herpaderpus,turtles_head,nubstep_rs,taketv,destiny,followgrubby&callback=?’, function(d) {
});

How would I have to get all the data from this collection? How can I iterate over each member? How do I get data from this call at all? I’ve tried the following (without success, sadly):

if (d.followgrubby.stream != null)
{
alert(“Working!”)
}

(of course I made sure he was actually streaming)

Also, I believe I forgot a good amount of ; at the end of functions in my first draft, I fixed those too and it solved my 2nd issue from earlier

7

d.streams is an array of all active streams

Check the example response in the API docs…
Or look at the output in your browser (there are some great json viewing extensions for both chrome and firefox, they format the json in an easy to read manner)

1 Like