title: Calling a function inside reduce / jQuery
body: <p>My webpage isn't loading. However, if I moved the <code>$(".datacards").append(html)</code> into the <code>displayResults</code> function, everything loads fine. I just wanted to reduce all the calls into 1 string with reduce and then append it once, like in my code below. Except, it's not loading when I have it set up like this. Any help would be appreciated. Thanks.</p>
  
  <pre><code>    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  `
      &lt;div class="col-sm-12 col-md-4"&gt;
          &lt;div class="card"&gt;
          &lt;p class="name"&gt;${display_name}&lt;/p&gt;
          &lt;div class="circle"&gt;&lt;i class="fas fa-circle fa-1x"&gt;&lt;/i&gt;&lt;/div&gt;
          &lt;img src="${logo}" class="avatar"&gt;
          &lt;p class="status text-center"&gt;${status}&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/div&gt;`;
  }
  </code></pre>