Hello guys I am currently doing the twitch TV project. I have problems trying to display each channel and status I obtained from my ajax request. I created an object called user and every item has its property in the object. I can’t figure out how to display them on my html page.
this is the code i wrote for it:
var arrayUser = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "noobs2ninjas"];
var clientId = "i2amudxl5gpnvagzddh9lh3a5t34c9";
var user = {
id: '',
displayName: '',
name: '',
logo: '',
url: '',
stream: '',
streamStatus: '',
};
for (i = 0; i < arrayUser.length; i++) {
$.ajax({
type: "GET",
datatype: "json",
url: "https://api.twitch.tv/kraken/users/" + arrayUser[i] + "?client_id=" + clientId,
xhrFields: {
xhrCrendentials: false
},
success: function(data) {
user.id = data._id;
user.displayName = data.display_name;
user.logo = data.logo;
user.name = data.name;
}
});
}
for (i = 0; i < arrayUser.length; i++) {
$.ajax({
type: "GET",
datatype: "json",
url: "https://api.twitch.tv/kraken/streams/" + arrayUser[i] + "?client_id=" + clientId,
xhrFields: {
xhrCredentials: false
},
success: function(data) {
user.stream = data.stream;
user.streamStatus = data.status;
if (user.stream !== null) {
user.url = data.stream.url;
} else if (user.stream === null) {
user.url = 'https://www.twitch.tv/' + user.name;
}
}
});
}
$("#offline").on("click", function() {
$("#user").empty();
$("#user").append('<li class ="list-group-item text-center"><a href=' + user.url + '" target="blank">' + user.displayName + ' </a> is currently offline </li> ');
});
$("#online").on("click", function() {
$("#user").empty();
$("#user").append('<li class ="list-group-item text-center"><a href="' + "https://www.twitch.tv/" + user.name + '" target="blank">' + user.displayName + ' </a> is currently online </li> ');
});
Any assistance will be greatly appreciated. Thanks