Help needed: Twitch API project not showing streamer info

Other Questions Twitch
1

I’m working on the freeCodeCamp Twitch API project and I’m stuck. My code fetches data from the API, and I can see the logo, display name, and status in the console. But nothing shows up on the webpage. I’ve tried debugging but can’t figure out what’s wrong. Here’s a simplified version of my code:

$(document).ready(function() {
  const streamers = ['PopularGamer', 'CodingGuru', 'ArtisticStreamer'];
  const apiBase = 'https://example-api.com/twitch/';

  streamers.forEach(streamer => {
    $.getJSON(apiBase + 'streams/' + streamer, function(data) {
      let status, name, logo;
      
      if (data.stream) {
        status = 'Live';
        name = data.stream.channel.name;
        logo = data.stream.channel.logo;
      } else {
        $.getJSON(apiBase + 'channels/' + streamer, function(channelData) {
          status = 'Offline';
          name = channelData.name;
          logo = channelData.logo;
        });
      }
      
      $('#streamer-list').append(`<div>${logo} ${name} ${status}</div>`);
    });
  });
});

Can anyone spot what I’m doing wrong? Thanks for any help!

2

hey RunningRiver, looks like ur appending to #streamer-list might be happening b4 the data is fetched. try moving that line inside the callback function for the channel data. Also, make sure ur HTML has an element with id ‘streamer-list’. if that doesnt work, maybe try using .html() instead of .append(). good luck!