Keskustelu: Nettisivujen teko: Twitch-käyttäjien streamin tilan haku

Elikkä sain Sydäntalven nettisivumestarilta moisen koodin, että voin näyttää killan nettisivun etusivulla kiltalaisten streamit jos ovat päällä. Valitettavasti tuo ei toimi itselläni. Tuosta ilmeisesti puuttuu jotain, mutta mitä tarkalleen ottaen? En juuri nyt pääse kyselemään kyseiseltä henkilöltä apuja.

$(document).ready(function() {
	var streamsEl = $('div.streams');
	if (streamsEl.length > 0) {
		$.get('http://www.kalmankaarti.org/data.json', function(data) {
			var streams = [];
			var cb = _.after(data.length, function() {
				streams = _.filter(streams, function(s) { return s.stream !== null; });
				if (streams.length === 0) {
					streamsEl.html('<p>No streams online')
				} else {
					console.log(streams);
					streamsEl.html(_.template(
						'<% _.each(streams, function(s) { %>' +
						'<h4 style="text-align:center;">' +
						'<a href="<%= s.stream.channel.url %>" target="_blank"><%= s.stream.channel.display_name %></a><br>' +
						'</h4>' +
						'<p>' +
						'<a href="<%= s.stream.channel.url %>" target="_blank"><img src="<%= s.stream.preview.medium %>"></a>' +
						'</p><% }); %>', {streams: streams}));
				}
			});
			_.each(data, function(d) {
				$.getJSON('https://api.twitch.tv/kraken/streams/' + d + '?callback=?', function(stream) {
					streams.push(stream);
					cb();
				});
			});
		})
	}
});

Elikkä <div id="streams"></div> ei näytä mitään (myöskään classilla). Tarvittava "data.json" -tiedosto on olemassa kyseisessä osoitteessa. Omat JavaScript-taidot ovat tasoa nolla, joten käyttäkää ratakiskoa.

Kokeile vaihteeksi olla aloittamatta postausta ja muita virkkeitä sanan "eli" johdannaisilla. Niin, ja lataa myös jQuery sekä underscore.js. Jatkossa laita myös selaimen virheilmoitukset, koska aina virheet eivät vain näy niin selvästi.

Kuten mainittu, sivu ei näytä mitään. Operan "Inspect element" -ominaisuudella saan kuitenkin selville, että "Unhandled Error: Undefined variable: $" näkyy. jQuery tuolla jo olikin, nyt myös underscore.

Se on juuri jQuery, joka tuon $-muuttujan määrittelee, joten sulta edelleen puuttuu jQuery tai sitten lataat sen väärin.

Latasin jQueryn erillisestä, paikallisesta tiedostosta. Nyt laitoin sen hakemaan jQueryn Googlelta, jolloin virheilmoitus vaihtui seuraavaan:

/**/jQuery111103838438701209621_1421499508213({"error":"NotFound","status":404,"message":"Channel 'n' does not exist"})

Tuo siis samalla inspectillä, itse sivulle ei tule mitään.

Mistä 'data.json' tiedostosta sinä tuossa ekassa viestissä puhut, kun sitä nimeä ei koodissa näy ollenkaan. Jos menee nettiselaimella tuohon ensiksi haettavaan osoitteeseen http://www.kalmankaarti.org/phpBB3/streams.js niin tulee vain virhe 404, eli sitä tiedostoa ei löydy.

Jaa siellä oli hitusen väärä linkki. No, onneksi se koski vaan tuota tänne laitettua koodia, editoin viestin oikein joten nyt näkyy data.json ja löytyy selaimellakin. Se siis sisältää streamaavien henkilöiden tunnuksen nimen joiden tila tulee hakea.

Tein pienehkön testisivun tolle skriptille:
http://www.kalmankaarti.org/streams.html
Tuolta inspektaamalla sanoo nyt "Unhandled Error: Undefined variable: _". Jos suorittaa samaa tavaraa kansiossa ni sitten ei puhu mitään (selaimen inspect tosin jatkaa herjaamista että kaikkia skriptejä ei suoritettu ja sivu pitäisi päivittää tms.):
http://www.kalmankaarti.org/testvault/streams.html

Näyttää siltä, että Underscoren template-funktio ei enää ota data-parametria. Käytä versiota, jolle skripti on tehty tai päivitä koodi uudemman version mukaiseksi: http://underscorejs.org/#template