Hi,
Here is a front-end example… Maybe it is help to you or anyone else…
"use strict";
// type = the response format JSON or text
const callAJAX = (props) => {
const url = props.url,
method = props.method || "GET",
type = props.type || "JSON",
header = props.header
;
return new Promise(waitForResult => {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
type === "text"
? waitForResult(this.response)
: waitForResult(JSON.parse(this.response))
;
}
};
if (method === "GET") {
xhttp.open("GET", url, true);
for (const key in props.header) {
xhttp.setRequestHeader(key, header[key]);
}
xhttp.send();
}
});
};
const AJAXProps = {
url: "https://api.twitch.tv/helix/streams?first=20",
header: {"client-ID": "--- your client id goes here ---"}
};
// Get Streams: -----------------------------------------------------------
callAJAX(AJAXProps).then(response => {
console.log("streams", response);
});
// Get Streams Metadata: -----------------------------------------------------------
AJAXProps.url = `https://api.twitch.tv/helix/streams/metadata`;
callAJAX(AJAXProps).then(response => {
console.log("metaData", response);
});
// Get All Stream Tags: -----------------------------------------------------------
AJAXProps.url = `https://api.twitch.tv/helix/tags/streams?first=20`;
callAJAX(AJAXProps).then(response => {
console.log("streamsTags", response);
});
// Get specified stream Tags: -----------------------------------------------------------
let broadcasterID = "110690086"; // is it the user ID ???
AJAXProps.url = `https://api.twitch.tv/helix/streams/tags?broadcaster_id=${broadcasterID}`;
callAJAX(AJAXProps).then(response => {
console.log("specified stream Tags", response);
});
// Get Users: -----------------------------------------------------------
const userID = 110690086; // multiple id's query separate with ampersans (&id=...&id=...)
AJAXProps.url = `https://api.twitch.tv/helix/users?id=${userID}`;
callAJAX(AJAXProps).then(response => {
console.log("get User by ID", response);
});
const loginName = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "myth"];
let names = "";
while (loginName.length) {
let name = loginName.pop();
!(names)
? names += name
: names += `&login=${name}`
;
};
AJAXProps.url = `https://api.twitch.tv/helix/users?login=${names}`;
callAJAX(AJAXProps).then(response => {
console.log("get User by login name:", response);
});
// check if users now streaming:
AJAXProps.url = `https://api.twitch.tv/helix/streams?first=20&user_login=${names}`.replace(/login/g, "user_login");
callAJAX(AJAXProps).then(response => {
console.log("check if the given users now streaming", response);
});
// Get Users Follows: -----------------------------------------------------------
const fromID = 30104304; // this is the dataset of followed users???
const toID = 110690086; // this is the dataset of followers???
AJAXProps.url = `https://api.twitch.tv/helix/users/follows?from_id=${fromID}`;
callAJAX(AJAXProps).then(response => {
console.log("Get User Follows from:", response);
});
AJAXProps.url = `https://api.twitch.tv/helix/users/follows?to_id=${toID}`;
callAJAX(AJAXProps).then(response => {
console.log("Get User Follows to:", response);
});
// Get Clips: -----------------------------------------------------------
const clipID = 110690086; // one or more; Which data need here? Where can I find the clip's ID???
broadcasterID = 110690086; // one only; ... and here???
let gameID = 33214; // one only
AJAXProps.url = `https://api.twitch.tv/helix/clips?id=AwkwardHelplessSalamanderSwiftRage`; // static ID from sample code
callAJAX(AJAXProps).then(response => {
console.log("Get Clips", response);
});
AJAXProps.url = `https://api.twitch.tv/helix/clips?game_id=${gameID}`;
callAJAX(AJAXProps).then(response => {
console.log("Get Clips by game ID", response);
});
// Get Game: -----------------------------------------------------------
gameID = 490422;
let gameName = "Fortnite";
AJAXProps.url = `https://api.twitch.tv/helix/games?id=${gameID}`;
callAJAX(AJAXProps).then(response => {
console.log("Get Game by ID:", response);
});
AJAXProps.url = `https://api.twitch.tv/helix/games?id=${gameID}`;
callAJAX(AJAXProps).then(response => {
console.log("Get Game by Name:", response);
});
// kraken channels -----------------------------------------------------------------------
AJAXProps.header["Accept"] = "application/vnd.twitchtv.v5+json";
console.log(AJAXProps.header);
AJAXProps.url = `https://api.twitch.tv/kraken/channels/30220059`;
callAJAX(AJAXProps).then(response => {
console.log("kraken channels", response);
});