Twitch Project - Data not Appending

1

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>`;
}
3

Here is my whole script file.

var streamers = [
  "joweed15",
  "overwatchleague",
  "blizzheroes",
  "freecodecamp",
  "nl_kripp",
  "drdisrespectlive",
  "ryuquezacotl",
  "queenmico",
  "timthetatman",
  "thijshs",
  "lilypichu",
  "arteezy"
];

function getStreamers() {
  // var html = "";
  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
      );
    });
  }, "");
  $(".datacards").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>`;
}

$(document).ready(function() {
  getStreamers();
});