CODEWITHSUNDEEP
javascriptjqueryjson
BlackBat023
BlackBat023

Reputation: 25

How do I filter my api results to only show users that's either online or offline?

me again. I've managed to almost finish this project without help (quite chuffed), but alas I need some aid now. I'm trying to design a tabbed menu that filter the results of my API calls to: Show all users, Show users only online and show users only offline. Please help.

Please see my code attached below:

    <body class="container-fluid">
  <div class="container-fluid center" id="title">
    <h1 class="text-center">My Twitch.TV Favorites List</h1>
    <div class="text-center" id="mainLink"></div>
  </div>
  <div class="container">Filter: 
    <ul class="nav nav-tabs">
      <li class="active"><a href="#userDisplay">All</a></li>
      <li id="menuOnline"><a href="#userDisplay">Online</a></li>
      <li id="menuOffline"><a href="#userDisplay">Offline</a></li>
    </ul>
  </div>
  <div class="container-fluid center" id="userDisplay">
    <div class="container col-md-1" id="logo"></div>
    <div class="container col-md-2" id="name"></div>
    <div class="container col-md-8" id="activity"></div>
    <div class="container col-md-1" id="status"></div>    
  </div>
</body>

...and my JQuery:

$(document).ready(function() {
  var userArr = [
    "ESL_SC2",
    "OgamingSC2",
    "cretetion",
    "freecodecamp",
    "habathcx",
    "RobotCaleb",
    "noobs2ninjas",
    "Blackbat023",
    "thewildfirecommunity"
  ];

  for (var i = 0; i < userArr.length; i++) {
    var usersData ="https://wind-bow.gomix.me/twitch-api/users/" +userArr[i] +"?callback=?";
    var channelsData ="https://wind-bow.gomix.me/twitch-api/channels/" +userArr[i] +"?callback=?";
    var streamsData ="https://wind-bow.gomix.me/twitch-api/streams/" +userArr[i] +"?callback=?";


    $.getJSON(channelsData, function(users) {
      //console.log(users);
      $("#userDisplay").append(function(){
      $("#logo").append("<img src=" +users.logo +' class="img-resonsive img-thumbnail" alt="Logo" />');
      $("#name").append('<h4>' +users.name +"</h4> (" +users.updated_at +")<br><br>");
      $("#activity").append('Acitvity: <h4>'+users.status +"</h4><br>");
      });
    });

    $.getJSON(streamsData, function(streams) {
      //console.log(streams);
      var streamData = streams.stream;
      if (streamData === null) {
        $("#status").append('<img src="http://i.imgur.com/vz0GuT9.png" class="img-responsive img-thumbnail" alt="Offline" />'
        );
      } else {
        $("#status").append('<img src="http://i.imgur.com/4jbBgtn.png" class="img-responsive img-thumbnail" alt="Online" />'
        );
      }

      $(".active").onClick(function(){
        window.reload;
      });
      $("#menuOnline").onClick(function(){
        var statArr = $.grep(userArr, function(element, index){
          return(streamData != null);
        });
      });
      $("#menuOffline").onClick(function(){
        var statArr = $.grep(userArr, function(element, index){
          return(streamData == null);
        });
      });
    });
  }

  $.getJSON('https://wind-bow.gomix.me/twitch-api/streams/freecodecamp?callback=?', function(fccData){
    //console.log(fccData);
    if(fccData.stream === null){
      $("#mainLink").append('<h2><a href="https://www.twitch.tv/freecodecamp" target="blank">We are currently offline</a></h2>');
    } else {
      $("#mainLink").append('<h2><a href="https://www.twitch.tv/freecodecamp" target="blank">Please join us on Twitch.TV</a></h2>');
    }
  });


});

Upvotes: 0

Views: 134

Answers (1)

Barmar
Barmar

Reputation: 781004

When you're creating the HTML for the users, give them a class that indicates whether they're online or offline.

  if (streamData === null) {
    $("#status").append('<img src="http://i.imgur.com/vz0GuT9.png" class="img-responsive img-thumbnail user-offline" alt="Offline" />'
    );
  } else {
    $("#status").append('<img src="http://i.imgur.com/4jbBgtn.png" class="img-responsive img-thumbnail user-online" alt="Online" />'
    );
  }

Then you can use these classes to hide or show the appropriate users:

$("#menuOnline").click(function() {
    $("#status .user-online").show();
    $("#status .user-offline").hide();
});
$("#menuOffline").click(function() {
    $("#status .user-offline").show();
    $("#status .user-online").hide();
});

These click handlers should be at the top level of your $(document).ready() function, not inside the for loop.

Upvotes: 2

Related Questions