title: Twitch API v5 -- Find out if streamer is live
body: <p>
  Hello, I am working with the Twitch API v5 and I figured out how to find out whether or not the twitch streamer is live or not, but I can't seem to figure out how to display whether or not it's live per user. I have 10 results show up per search in my app. The only way I can really explain it is by showing the code and hoping someone can give an answer. I'll post a screenshot and link the HTML and JS.</p>
  
  <p>I know that on line 80 in the JavaScript the result is appearing 10 times because I'm using the forEach method for the array thats length is 10. But I'm only trying to display each result per popover in the search result modal. I've tried using the $.each() method as well and the result seems the be relatively similar.</p>
  
  <p>Been stuck on this for hours on end and I feel like at a certain point I'd rather give in and ask some people with more experience. Would really appreciate any insights and feedback. Thanks!</p>
  
  <p><a href="https://i.stack.imgur.com/Clzzw.png" rel="nofollow noreferrer">Screenshot</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
    // Display results from search
    $('#user_search').on('click', function(e){
      e.preventDefault();
      $('#clean').modal('show');
    });
    $('#submit_search').on('submit', function(e){
      e.preventDefault();
      $('#clean').modal('show');
    });
    $(function () {
      $('[data-toggle="popover"]').popover();
    });
  
  
  });
  // First AJAX call for searching twitch.tv channels
  $('#submit_search').on('submit', function() {
    var usersearch = document.getElementById('user_input').value;
    var userURL = 'https://api.twitch.tv/kraken/search/channels?query=' + usersearch;
    $.ajax({
      url: userURL,
      type: 'GET',
      dataType: 'json',
      contentType: 'application/json',
      headers: {
        'Accept': 'application/vnd.twitchtv.v5+json',
        'Client-ID': 'm6dsm7dm7pd4ltqh3nd82g5nudjbu2'
      },
      success: function(data) {
        // Multiple search without refreshing page
        // Have this before you call cloneElement() so it doesn't conflict
        var clean = $('#clean').clone();
        $('#clean').on('hidden.bs.modal', function() {
          $(this).remove();
          var clone = clean.clone();
          $('body').append(clone);
          $('#clean').hide();
        });
  
        cloneElement(data);
        $('.list-group-item:first').hide()
        console.log(data);
  
        // Clone HTML search results to display without cluttering HTML
        function cloneElement(data) {
          for(var i = 0; i &lt; data.channels.length; i++) {
  
            var name = data.channels[i].display_name;
            var game = data.channels[i].game;
            var logo = data.channels[i].logo;
            var follow = data.channels[i].followers;
            var commas = new Intl.NumberFormat().format(follow);
  
            const sourceElement = document.querySelector('.list-group-item');
            const destination = document.querySelector('.list-group');
  
            const copy = sourceElement.cloneNode(true);
            copy.setAttribute('id', 'main_streamer-' + i);
  
            destination.appendChild(copy);
  
            $(copy).text(name);
            $(copy).popover({
              html: true,
              placement: 'right',
              trigger: 'hover',
              title: '&lt;p class="text-center"&gt;'+ name +'&lt;/p&gt;&lt;b class="status"&gt;User is: &lt;/b&gt;',
              content: '&lt;p class="text-center"&gt;'+ game +'&lt;/p&gt;'+'&lt;p class="text-center"&gt;Followers: '+ commas +'&lt;/p&gt;'+'&lt;img src="'+ logo +'" alt="streamers logo" class="img-thumbnail streamers_logo"&gt;'
            });
          }
        }
        
        var twitchId = [];
        for(var x = 0; x &lt; data.channels.length; x++) {
          twitchId.push(data.channels[x]._id);
          console.log(twitchId)
        }
        twitchId.forEach(function(stream) {
          // Second AJAX call for searching specific streamers
            var streamURL = 'https://api.twitch.tv/kraken/streams/' + stream;
            $.ajax({
              url: streamURL,
              type: 'GET',
              dataType: 'json',
              contentType: 'application/json',
              headers: {
                'Accept': 'application/vnd.twitchtv.v5+json',
                'Client-ID': 'm6dsm7dm7pd4ltqh3nd82g5nudjbu2'
              },
              success: function(data) {
                // Check if streamer is live or not
                $('.list-group-item').on('shown.bs.popover', function() {
                  if (data.stream == null) {
                    $('.streamers_logo').addClass('off');
                    $('.status').append('OFFLINE' + ".");
                    console.log('Streamer is offline...')
                  } else {
                    $('.popover-body').addClass('on');
                    $('.status').append('LIVE!');
                    console.log('Streamer is live!')
                };
              });
                console.log(data);
              }
          });
        })
      }
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="description" content="twitchtv"&gt;
      &lt;meta name="author" content="nicer00ster"&gt;
      &lt;link rel="icon" href="https://static.twitchcdn.net/assets/favicon-75270f9df2b07174c23ce844a03d84af.ico"&gt;
      &lt;title&gt;Twitch&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"&gt;
      &lt;link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.css"&gt;
      &lt;link rel="stylesheet" href="bower_components/awesomplete/awesomplete.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;header&gt;
        &lt;div class="collapse bg-dark" id="navbarHeader"&gt;
          &lt;div class="container"&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-sm-8 py-4"&gt;
                &lt;h4 class="text-white"&gt;About&lt;/h4&gt;
                &lt;p class="text-muted"&gt;Since launching in 2011, Twitch has evolved its reputation as the world’s leading social video service and community for video game culture to now encompass an array of emerging content surfaced by its users. As a result, 15 million visitors gather daily to interact about video games, music, the creative arts, their lives, and more with over 2 million unique creators who broadcast each month.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-4 py-4"&gt;
                &lt;h4 class="text-white"&gt;Contact&lt;/h4&gt;
                &lt;ul class="list-unstyled"&gt;
                  &lt;li&gt;&lt;a href="https://www.twitch.tv/" class="text-white"&gt;Twitch.tv&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="https://twitter.com/Twitch?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" class="text-white"&gt;Follow Twitch.tv on Twitter&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="https://www.facebook.com/Twitch/" class="text-white"&gt;Like Twitch.tv on Facebook&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="navbar navbar-dark bg-dark"&gt;
          &lt;div class="container d-flex justify-content-between"&gt;
            &lt;a href="#" class="navbar-brand"&gt;&lt;img src="img/twitch-icon-22.png" alt="logo" id="logo"&gt;&lt;/a&gt;
            &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/header&gt;
  
      &lt;main role="main"&gt;
        &lt;section class="jumbotron text-center"&gt;
          &lt;div class="container"&gt;
            &lt;img src="img/jTSqOU8.png" alt="twitchlogo" id="twitchHeading"&gt;
            &lt;p class="lead text-muted"&gt;Follow your favorite twitch streamers. Know when they're online, and know what they're streaming.&lt;/p&gt;
            &lt;form id="submit_search"&gt;
              &lt;div class="input-group"&gt;
                &lt;input type="hidden" name="search_param" value="all"&gt;
                &lt;input type="text" class="form-control" id="user_input" placeholder="Search streamer..."&gt;
                &lt;span class="input-group-btn"&gt;
                    &lt;button class="btn btn-outline-secondary" type="button" id="user_search"&gt;&lt;span class="fa fa-search" id="btnbtn"&gt;&lt;/span&gt;&lt;/button&gt;
                &lt;/span&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/section&gt;
  
        &lt;div class="album text-muted"&gt;
          &lt;div class="container"&gt;
  
            &lt;div class="row"&gt;
              &lt;div class="card" id='test'&gt;
                &lt;img data-src="holder.js/100px280?theme=thumb" alt="Placeholder"&gt;
                &lt;p class="card-text"&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;!--
              &lt;div class="card"&gt;
                &lt;h1 class='text-center'&gt;&lt;/h1&gt;
                &lt;hr&gt;
                &lt;div id="twitch-embed"&gt;&lt;/div&gt;
                &lt;iframe frameborder="0"
                        scrolling="no"
                        id="chat_embed"
                        src="http://www.twitch.tv/embed/imaqtpie/chat"
                        height="500"
                        width="350"&gt;
                &lt;/iframe&gt;
              --&gt;
              &lt;!-- Load the Twitch embed script --&gt;
              &lt;script src="https://embed.twitch.tv/embed/v1.js"&gt;&lt;/script&gt;
  
              &lt;!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. --&gt;
              &lt;script type="text/javascript"&gt;
                new Twitch.Embed("twitch-embed", {
                  width: 355,
                  height: 280,
                  channel: "imaqtpie",
                  layout: "video"
                });
              &lt;/script&gt;
  
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/main&gt;
  
      &lt;div class="modal fade" id="clean" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"&gt;
                &lt;div class="modal-dialog" role="document"&gt;
                  &lt;div class="modal-content"&gt;
                    &lt;div class="modal-header"&gt;
                      &lt;h5 class="modal-title"&gt;Search Results...&lt;/h5&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                        &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                      &lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div class="modal-body"&gt;
                      &lt;!-- Div to append clones to --&gt;
                      &lt;div class="list-group"&gt;
                        &lt;!-- Cloned per results of search --&gt;
                          &lt;a href="#" id="main_streamer-0" class="list-group-item list-group-item-action flex-column align-items-start"&gt;
                            &lt;h5 class="text-center"&gt;&lt;/h5&gt;
                            &lt;hr&gt;
                            &lt;div class="d-flex w-100 justify-content-center"&gt;
                            &lt;/div&gt;
                          &lt;/a&gt;
  
                      &lt;/div&gt;
  
                    &lt;/div&gt;
  
                    &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-outline-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
                    &lt;/div&gt;
  
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
      &lt;footer class="text-muted"&gt;
        &lt;div class="container"&gt;
          &lt;p class="float-right"&gt;
            &lt;a href="#"&gt;Back to top&lt;/a&gt;
          &lt;/p&gt;
          &lt;p&gt;Template sourced -- &amp;copy; &lt;a href="http://getbootstrap.com/"&gt;Bootstrap&lt;/a&gt;&lt;/p&gt;
          &lt;p&gt;Data provided by -- &amp;copy; &lt;a href="https://www.twitch.tv/"&gt;Twitch.tv&lt;/a&gt;&lt;/p&gt;
          &lt;p&gt;Alex Busch&lt;/p&gt;
        &lt;/div&gt;
      &lt;/footer&gt;
      &lt;!-- JS at bottom so loads quicker --&gt;
      &lt;script type="text/javascript" src="bower_components/jquery/dist/jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="bower_components/holderjs/holder.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/script.js"&gt;&lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>