Append Info to a Div upon Pressing Button

Question

I currently have a Twitch TV web app in which the UI interface is designed in such a way that I want the large blue screen to be where all online and offline info is appended to upon pressing an "all" button, and only online info is appended here when "online" button is pressed, and only offline info is appended when "offline" button is pressed. Currently the info is appended to the wrong divs. How can I fix this?

Here is my codepen: https://codepen.io/IDCoder/pen/mXMqGV?editors=0010

And here is my javascript code:

//with help from places..... https://stackoverflow.com/questions/48859596/error-call-for-get-json-function-within-for-loop/48859987#48859987, etc, etc....
$(document).ready(function(){

//GET TWITCH TV STREAMERS' STATUS AND API CALL

var twitchTvStreamers=["FreeCodeCamp", "ESL_SC2", "OgamingSC2", "cretetion", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

//OUT OF ALL THE TWITCH TV STREAMERS IN A TWITCH TV ARRAY FIND THOSE 8 STREAMERS LISTED
for(channel of twitchTvStreamers){
    getChannelInfo(channel);

    }
});
var getChannelInfo = channel => { 
    $.getJSON('https://wind-bow.glitch.me/twitch-api/streams/' + channel)
    .done(function(info) {
        if (info.stream === null) appendInfo(channel,'offline');
        else appendInfo(channel,'online');
    });
}
var appendInfo = (channel,target) => {
    $.getJSON('https://wind-bow.glitch.me/twitch-api/channels/' + channel)
        .done( function(ch){
            channelID = ch.display_name;
            channelLogo = ch.logo;
            channelUrl = ch.url;
            streamContent = ch.content;
            $('#'+target).append('<div class="TV-screen">'+channel+' is '+target);
        });    
}

And here is my html code:

<html> 

<head>


<title>

</title>

</head> 
<body>

<div class="container">

    <div class="Twitch-TV">
    <h1>Twitch TV Web App</h1>
    </div>
    <div class="share">
      <ul class="soc">
          <li class="declaration">
          SHARE
          </li>
          <li class="socbutton">
            <a href="https://www.linkedin.com" target="blank"><i class= "fa fa-linkedin-square fa-fw"></i>LINKEDIN</a>
          </li>
          <li class="socbutton">
            <a href="https://github.com" target="blank"><i class= "fa fa-github fa-fw"></i>GITHUB</a>
          </li>
          <li class="socbutton">
            <a href="https://www.facebook.com" target="blank"><i class= "fa fa-facebook-official fa-fw"></i>FACEBOOK</a>
          </li>
          <li class="socbutton">
            <a href="https://www.freecodecamp.com" target="blank"><i class= "fa fa-fire fa-fw"></i>FREECODECAMP</a>
          </li>
        </ul>
    </div>

    <div class="TV-screen"> 
    </div>

    <div class="user-status">
    <button id ="online" type="button" class="online-status" >Online</button>
    <button id ="offline" type="button" class="offline-status" >Offline</button>
    <button id ="all" type="button" class="online-and-offline" >All</button>
    </div>

    <div class="input">
        <input type="text" id="searchTerm" placeholder="search streams....">        
    </div>
</div>



</body> 
</html>

Thanks for the help!

Answer 1

Js

var twitchTvStreamers;
var loaded = false;
//with help from places..... https://stackoverflow.com/questions/48859596/error-call-for-get-json-function-within-for-loop/48859987#48859987, etc, etc....
$(document).ready(function(){

//GET TWITCH TV STREAMERS' STATUS AND API CALL

twitchTvStreamers=["FreeCodeCamp", "ESL_SC2", "OgamingSC2", "cretetion", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

//OUT OF ALL THE TWITCH TV STREAMERS IN A TWITCH TV ARRAY FIND THOSE 8 STREAMERS LISTED

});

//filter online offline and all
var filterchannel = filterch => { 
  if(!loaded)
  {
    for(channel of twitchTvStreamers){
      getChannelInfo(channel, filterch);
    }
  }
  else
    {
      setTimeout(function(){ 
        $('.TV-screen div').each(function(idx, item) {
          if($(item).hasClass(filterch))
            {
              $(item).show();
            }
          else
            {
              $(item).hide();
            }
        });
      }, 100);
    }
};

$('button').click(function(e) {
 filterchannel(e.target.id);
})

var getChannelInfo = (channel, filterch) => { 
    loaded = true;
    $.getJSON('https://wind-bow.glitch.me/twitch-api/streams/' + channel)
    .done(function(info) {
        console.log(channel);
        if (info.stream === null) {
          appendInfo(channel,'offline',filterch);
        }
        else {
          appendInfo(channel,'online', filterch);
        }

    });
}
var appendInfo = (channel,target, filterch) => {
    $.getJSON('https://wind-bow.glitch.me/twitch-api/channels/' + channel)
        .done( function(ch){
            channelID = ch.display_name;
            channelLogo = ch.logo;
            channelUrl = ch.url;
            streamContent = ch.content;
            $('.TV-screen').append('<div class="' + target + ' all">'+channel+' is '+target);
            if(twitchTvStreamers[twitchTvStreamers.length - 1] === channel) {
              filterchannel(filterch);
            }
        });    
}

codepen: https://codepen.io/YasirKamdar/pen/EQQXBw

Append Info to a Div upon Pressing Button

Question

1 answers

solution1
1 ACCPTED 2018-02-19 09:27:49

Append Info to a Div upon Pressing Button

Question

1 answers

solution1 1 ACCPTED 2018-02-19 09:27:49

solution1
1 ACCPTED 2018-02-19 09:27:49