I’m having some difficulties with display data from the different users. Initially when I started this project I had created a for loop around the getJSON method, but then codepen noted that I could not do that. I disregarded it and it seemed to work, but then I realized this was going to cause some issues when I wanted to add any of the content to my page since I didn’t want it to loop some of the statements.
I ended up creating this instead. (I’ll explain the stream part in just a moment)
for (var i = 0; i < twitchUsernames.length; i++) {
var channel = twitchUsernames[i];
var url = 'https://wind-bow.gomix.me/twitch-api/users/' + channel;
var stream = 'https://wind-bow.gomix.me/twitch-api/streams/' + channel;
userInfo(url);
streamInfo(stream);
}
function userInfo(url) {
$.getJSON(url, function(json) {
var injectHTML = '<li id="twitchAcct" class="text-left">' + json.display_name + '</li>';
$('#body_dashboard').append(injectHTML);
console.log(json.display_name);
}); // end getJSON
}
This allows me to iterate through each of the users streams, but I wanted to create the HTML and package in up nicely in a variable and then use the HTML method from jQuery to load it into the page.
Every time I did that and I tried a few different ways, it would only end up displaying one of the items instead of all 7. I decided to try append instead and sure enough it listed it all! The only issue I have with this is append seems a lot slower to load than HTML and I want to make sure I’m using best practices. So any thoughts with that?
Next, I need to grab the steam data so this is where the 2nd function comes into play. Take a look at my codepen to see the whole thing -> https://codepen.io/sethdcd/pen/oZZYLz?editors=1010
This is where this program gets sloppy because now it’s adding two separate li tags and then I’m not even sure if they are lining up since this is AJAX. So clearly that is not the way.
Overall my main question is what is the best way to call data from each of the the different users and then be able to display that data? It seems like I’m pulling data, but it doesn’t seem right. Thanks!