Restructured and converted to async functions.

This commit is contained in:
Josh Creek
2019-09-17 23:13:44 +01:00
parent 092ac9c244
commit 268d5282d2
+158 -84
View File
@@ -1,103 +1,156 @@
const app = document.getElementById('root');
const container = document.createElement('div');
container.setAttribute('class', 'container');
var clientID = 'xxxxxx'; // Hide this for github, it's my application's Client ID
var topGames = []; // Holds roughly the top thousand games by viewers, although the viewer count per game is unavailable for some reason but this can be calculated by totalling the viewers from all streams for a particular game, if necessary
var topStreams = []; // Need to get a lot more of these to get useful data, and compare using the game ids where they match the top games - N.B. will need to remove/ignore any duplicate streams as between pages the data can change as viewers leave and join streams
app.appendChild(container);
// !todo - Currently only getting top 100 games (a single page of results), need to get more for more accurate data analysi
function getTopGames(cursor) {
console.log('--> getTopGames');
async function getTopGamesAsync(){
console.log('--> getTopGamesAsync');
// See https://dev.twitch.tv/docs/api/reference/#get-top-games
var requestUrl = 'https://api.twitch.tv/helix/games/top?first=100';
if(cursor.length > 0)
{
requestUrl += '&after=' + cursor;
}
var request = new Request(requestUrl, {
headers: new Headers({
'Client-ID': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx' // Hide this for github, it's my application's Client ID
})
});
// List to hold the top games, to be returned by the function
var tempList = [];
var tempCursor = '';
var requestUrlBase = 'https://api.twitch.tv/helix/games/top?first=100';
fetch(request)
.then(response => {
return response.json()
})
.then(data => {
// Get the cursor
console.log(data.pagination.cursor);
tempCursor = data.pagination.cursor;
// Get each game from the returned JSON data and add it to the list
data.data.forEach(game => {
tempList.push(game);
});
})
.catch(err => {
// Do something for an error here
const errorMessage = document.createElement('marquee')
errorMessage.textContent = `Gah, it's not working! Error is ` + err
app.appendChild(errorMessage)
})
var request1 = new Request(requestUrlBase, {headers: new Headers({'Client-ID': clientID})});
let response1 = await fetch(request1);
let data1 = await response1.json();
// Get the cursor
let cursor1 = await data1.pagination.cursor;
// Get each game from the returned JSON data and add it to the list
data1.data.forEach(game => {
tempList.push(game);
});
return { 'data': tempList, 'cursor': tempCursor };
var request2 = new Request(requestUrlBase + '&after=' + cursor1, {headers: new Headers({'Client-ID': clientID})});
let response2 = await fetch(request2);
let data2 = await response2.json();
// Get the cursor
let cursor2 = await data1.pagination.cursor;
// Get each game from the returned JSON data and add it to the list
data2.data.forEach(game => {
tempList.push(game);
});
var request3 = new Request(requestUrlBase + '&after=' + cursor1, {headers: new Headers({'Client-ID': clientID})});
let response3 = await fetch(request3);
let data3 = await response3.json();
// Get the cursor
let cursor3 = await data2.pagination.cursor;
// Get each game from the returned JSON data and add it to the list
data3.data.forEach(game => {
tempList.push(game);
});
var request4 = new Request(requestUrlBase + '&after=' + cursor1, {headers: new Headers({'Client-ID': clientID})});
let response4 = await fetch(request4);
let data4 = await response4.json();
// Get the cursor
let cursor4 = await data3.pagination.cursor;
// Get each game from the returned JSON data and add it to the list
data4.data.forEach(game => {
tempList.push(game);
});
var request5 = new Request(requestUrlBase + '&after=' + cursor1, {headers: new Headers({'Client-ID': clientID})});
let response5 = await fetch(request5);
let data5 = await response5.json();
// Get the cursor
let cursor5 = await data4.pagination.cursor;
// Get each game from the returned JSON data and add it to the list
data5.data.forEach(game => {
tempList.push(game);
});
var request6 = new Request(requestUrlBase + '&after=' + cursor1, {headers: new Headers({'Client-ID': clientID})});
let response6 = await fetch(request6);
let data6 = await response6.json();
// Get the cursor
let cursor6 = await data5.pagination.cursor;
// Get each game from the returned JSON data and add it to the list
data6.data.forEach(game => {
tempList.push(game);
});
var request7 = new Request(requestUrlBase + '&after=' + cursor1, {headers: new Headers({'Client-ID': clientID})});
let response7 = await fetch(request7);
let data7 = await response7.json();
// Get the cursor
let cursor7 = await data6.pagination.cursor;
// Get each game from the returned JSON data and add it to the list
data7.data.forEach(game => {
tempList.push(game);
});
var request8 = new Request(requestUrlBase + '&after=' + cursor1, {headers: new Headers({'Client-ID': clientID})});
let response8 = await fetch(request8);
let data8 = await response8.json();
// Get the cursor
let cursor8 = await data7.pagination.cursor;
// Get each game from the returned JSON data and add it to the list
data8.data.forEach(game => {
tempList.push(game);
});
var request9 = new Request(requestUrlBase + '&after=' + cursor1, {headers: new Headers({'Client-ID': clientID})});
let response9 = await fetch(request9);
let data9 = await response9.json();
// Get the cursor
let cursor9 = await data8.pagination.cursor;
// Get each game from the returned JSON data and add it to the list
data9.data.forEach(game => {
tempList.push(game);
});
var request10 = new Request(requestUrlBase + '&after=' + cursor1, {headers: new Headers({'Client-ID': clientID})});
let response10 = await fetch(request10);
let data10 = await response10.json();
// Get the cursor
let cursor10 = await data9.pagination.cursor;
// Get each game from the returned JSON data and add it to the list
data10.data.forEach(game => {
tempList.push(game);
});
return tempList;
}
var numberOfResultsToReturn = 1000;
var topGames = [];
// Loop to get the right amount of data back
var cursor1 = '';
for (i = 0; i < (numberOfResultsToReturn / 100); i++) {
console.log('--> loop ' + i);
// Get back a list of 100 games and data.pagination.cursor as a string
var returnedData = getTopGames(cursor1);
console.log(returnedData);
// Concatenate that list and save the next cursor
topGames = topGames.concat(returnedData.data);
cursor1 = returnedData.cursor;
};
function getTopStreams() {
async function getTopStreamsAsync(){
console.log('--> getTopStreamsAsync');
// See https://dev.twitch.tv/docs/api/reference/#get-streams
var request = new Request('https://api.twitch.tv/helix/streams?first=100', {
headers: new Headers({
'Client-ID': 'eawzslliv2kz89gj58ul8tvy6p7fm3' // Hide this for github, it's my application's Client ID
})
});
// List to hold the top games, to be returned by the function
// List to hold the top streams, to be returned by the function
var tempList = [];
var requestUrlBase = 'https://api.twitch.tv/helix/streams?first=100';
fetch(request)
.then(response => {
return response.json()
})
.then(data => {
// Get each game from the returned JSON data and add it to the list
data.data.forEach(game => {
tempList.push(game);
// var request1 = new Request(requestUrlBase, {headers: new Headers({'Client-ID': clientID})});
// let response1 = await fetch(request1);
// let data1 = await response1.json();
// // Get the cursor
// let cursor1 = await data1.pagination.cursor;
// // Get each stream from the returned JSON data and add it to the list
// data1.data.forEach(stream => {
// tempList.push(stream);
// });
var request,response,data,cursor;
for (i = 0; i < 10; i++) {
request = new Request(requestUrlBase + (cursor != undefined ? '&after=' + cursor : ''), {headers: new Headers({'Client-ID': clientID})});
response = await fetch(request);
data = await response.json();
// Get the cursor
cursor = await data.pagination.cursor;
// Get each stream from the returned JSON data and add it to the list
data.data.forEach(stream => {
tempList.push(stream);
});
})
.catch(err => {
// Do something for an error here
const errorMessage = document.createElement('marquee')
errorMessage.textContent = `Gah, it's not working! Error is ` + err
app.appendChild(errorMessage)
})
}
return tempList;
}
@@ -106,6 +159,27 @@ function getTopStreams() {
// Get back a list of the most popular games by number of viewers
topGames = getTopGamesAsync();
topStreams = getTopStreamsAsync();
// Display logic
const container = document.createElement('div');
container.setAttribute('class', 'container');
app.appendChild(container);
// finalData.forEach(game => {
// const card = document.createElement('div');
// card.setAttribute('class', 'card');