在reduce / jQuery内调用函数

Question

我的网页没有加载。但是，如果我将$(".datacards").append(html)移到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>`;
}

Answer 1

$.getJSON()返回的是XHR对象，而不是您请求的数据。它也是异步的，这意味着结果将在稍后出现。这就是为什么会有处理数据的回调函数。因此，html将包含一个对象，如果您实际需要从该应用程序接口返回的数据，那么您将以非常不同的方式处理它。仅仅把reduce()放在任何函数调用的前面是做不到你想要的。

当收到新的结果时，你必须执行调用并追加数据。如果你真的想一次获得所有数据，那就有点棘手了，但我不认为你需要这样做。只需将来自displayResults的结果逐个添加即可。