Ad

Append Info To A Div Upon Pressing Button

- 1 answer

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 target="_blank" rel="nofollow noreferrer" href="https://www.linkedin.com" target="blank"><i class= "fa fa-linkedin-square fa-fw"></i>LINKEDIN</a>
          </li>
          <li class="socbutton">
            <a target="_blank" rel="nofollow noreferrer" href="https://github.com" target="blank"><i class= "fa fa-github fa-fw"></i>GITHUB</a>
          </li>
          <li class="socbutton">
            <a target="_blank" rel="nofollow noreferrer" href="https://www.facebook.com" target="blank"><i class= "fa fa-facebook-official fa-fw"></i>FACEBOOK</a>
          </li>
          <li class="socbutton">
            <a target="_blank" rel="nofollow noreferrer" 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!

Ad

Answer

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

Ad
source: stackoverflow.com
Ad