Javascript 在reduce/jQuery中调用函数

我的网页没有加载。但是，如果我将$.datacards.appendhtml移到displayResults函数中，所有内容都可以正常加载。我只是想用reduce将所有调用缩减为一个字符串，然后再追加一次，就像下面的代码一样。不过，当我把它设置成这样时，它不会加载。任何帮助都将不胜感激。谢谢

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

$.getJSON返回XHR对象，而不是您请求的数据。它也是异步的，这意味着结果将在以后出现。这就是为什么有回调函数来处理数据。因此，html将包含一个对象，如果您确实需要从API返回的数据，您将以非常不同的方式处理它。仅仅在任何函数调用之前放置reduce并不能满足您的需要

当收到新结果时，您必须执行调用并追加数据。如果你真的想同时得到所有的数据，那就有点麻烦了，但我认为你不需要这些。只需逐个添加displayResults的结果