CODEWITHSUNDEEP
javascriptjqueryalgorithmif-statementappend
Jordan Merrill
Jordan Merrill

Reputation: 35

How to add and if condition into an append() with jQuery

I am finishing up a TwitchTV project but have been struggling to figure out how to append some code with jQuery. This code needs to check the API to see if a user is streaming or not, then, depending on if he or she is or not, append information to an already dynamic, jQuery produced html.

Take a look at my JavaScript code. Right now, under the “status” row, you will see each user has info. If the user is offline, I would simply like to have the html read “offline.” If the user is online, I would like it to read "Online: " plus a short description of what the channel is about (the stream information is stored in a variable called “stream,” and the short description is stored in a variable called “statusWhat”).

I’m sorry if that is a bit confusing. I think seeing the code will make things clear: https://codepen.io/JayDevelopment/pen/bMKrLK 1

$(function() {
  var twitchers = [
    "ESL_SC2",
    "OgamingSC2",
    "cretetion",
    "storbeck",
    "habathcx",
    "RobotCaleb",
    "noobs2ninjas"
  ];

  //FREECODECAMP STREAM INFO AND API CALL
  var url =
    "https://api.twitch.tv/kraken/streams/freecodecamp?client_id=jjqkn1xu4g4rx7d3e1o5refrmw5bhd";
  $.getJSON(url, function(data) {
    if (data.stream === null) {
      $("#fccStatus").html("OFFLINE");
    } else {
      $("#fccStatus").html("FreeCodeCamp is ONLINE");
    }
    $('#fccGame').html()
  });
  for (var i = 0; i < twitchers.length; i++) {
    $.ajax({
      type: "GET",
      url: "https://api.twitch.tv/kraken/channels/" +
        twitchers[i] +
        "?client_id=jjqkn1xu4g4rx7d3e1o5refrmw5bhd",
      success: function(dataFor) {
        $.getJSON(
          "https://api.twitch.tv/kraken/streams/" +
          dataFor.name +
          "?client_id=jjqkn1xu4g4rx7d3e1o5refrmw5bhd").done(function(data2) {
            var name = dataFor.name;
            var logo = dataFor.logo;
            var statusWhat = dataFor.status;
            var stream = data2.stream;

            $('#info').append('<div class="row block">' +
              '<div class="col-sm">' +
              '<h1>' + '<img src=' + logo + '>' + '</h1>' +
              '</div>' +
              '<div class="col-sm">' +
              '<h1>' + name + '</h1>' +
              '</div>' +
              '<div class="col-sm" id="change">' +
              '<a href="https://www.twitch.tv/' + name + '"' + ' target="blank">' +
              '<h1 id="status">' + stream + ': ' + statusWhat + '</h1>' +
              '</a></div></div></div>')

            /* if (stream === null) {
              $("#status").append('OFFLINE');
            } else {
              $("#status").append('ONLINE: ' + statusWhat);
            }  */
          }
        );
      },
      error: function(error) {
        $("#logo").append('<img src=' + '#' + '>' + "<br>");
        $("#name").append('Invalid' + "<br>");
        $('#status').append('Not found');
      }
    });
  }
});

Upvotes: 1

Views: 77

Answers (1)

Barmar
Barmar

Reputation: 781096

You can do it when you assign to the stream variable:

if (data2.stream) {
    stream = data2.stream + " ONLINE: " + statusWhat;
} else {
    stream = "OFFLINE";
}

Upvotes: 1

Related Questions