If I put $(.datarows).append() inside my displayResults function, it will load. However, that is 12 append calls. I just wanted 1 append call, with 12 Twitch profiles stringed together, as in my code below. However, it doesn’t load this way and I can’t figure out why. Any help would be appreciated.
function getStreamers() {
var channelsAPI = "https://wind-bow.glitch.me/twitch-api/channels/";
var streamsAPI = "https://wind-bow.glitch.me/twitch-api/streams/";
var html = streamers.reduce(function(str, streamer) {
$.getJSON(channelsAPI + streamer, function(data) {
str += displayResults(
data.display_name,
data.name,
data.logo,
data.status
);
});
}, "");
$(".datarows").append(html)
}
function displayResults(display_name, name, logo, status) {
return `
<div class="col-sm-12 col-md-4">
<div class="card">
<p class="name">${display_name}</p>
<div class="circle"><i class="fas fa-circle fa-1x"></i></div>
<img src="${logo}" class="avatar">
<p class="status text-center">${status}</h3>
</div>
</div>`;
}