title: loop through json and html elements
body: <p>I am learning to code and for a challenge I need to get info about a number of twitch channels and update channel info and status if it is streaming live or not. Due to Twitch API constraints I am calling an endpoint to get channel Info and then call another endpoint to see which channel is streaming live and which is not.</p>
  
  <p>Now what I want to do is, loop through the <code>streamsJson</code>, and check if a channel ID matches onee of my channels and update the status to live and I need your help for this. </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() {
  
    var getUserInfo = $.ajax({
      type: "GET",
      url: "https://api.twitch.tv/helix/users/?login=ESL_SC2&amp;login=freecodecamp&amp;login=OgamingSC2&amp;login=cretetion&amp;login=storbeck&amp;login=habathcx&amp;login=RobotCaleb&amp;login=noobs2ninjas",
      contentType: ('application/x-www-form-urlencoded; charset=UTF-8'),
      crossDomain: true,
      headers: {
        "Client-ID": "5k4g3q59o69v6p9tudn39v50ro1mux",
      },
      dataType: "json",
      error: function() {
        console.log("Users call failed");
      },
      success: function(usersJson) {
        console.log(JSON.stringify(usersJson, null, 2));
        var getUserStatus = $.ajax({
          type: "GET",
          url: "https://api.twitch.tv/helix/streams/?channel=user_login=ESL_SC2&amp;user_login=freecodecamp&amp;user_login=OgamingSC2&amp;user_login=cretetion&amp;user_login=storbeck&amp;user_login=habathcx&amp;user_login=RobotCaleb&amp;user_login=noobs2ninjas&amp;stream_type=all",
          contenType: ('application/x-www-form-irlencoded; charset=UTF-8'),
          crossDomain: true,
          headers: {
            "Client-ID": "5k4g3q59o69v6p9tudn39v50ro1mux",
          },
          dataType: "json",
          error: function() {
            console.log("Streams call failed");
          },
          success: function(streamsJson) {
            console.log(JSON.stringify(streamsJson, null, 2));
  
            var jsonUsers = usersJson.data;
            // console.log(JSON.stringify(jsonUsers, null, 2));
            // console.log(jsonUsers[0].profile_image_url);
  
            // channel N° 1
            $("#img-holder1 &gt; img").attr("src", jsonUsers[0].profile_image_url);
            $(".channelInfo1").attr("id", jsonUsers[0].id);
            $(".channelInfo1 &gt; h3").text(jsonUsers[0].display_name);
  
            // channel N° 2
            $("#img-holder2 &gt; img").attr("src", jsonUsers[1].profile_image_url);
            $(".channelInfo2").attr("id", jsonUsers[1].id);
            $(".channelInfo2 &gt; h3").text(jsonUsers[1].display_name);
  
            // channel N° 3
            $("#img-holder3 &gt; img").attr("src", jsonUsers[2].profile_image_url);
            $(".channelInfo3").attr("id", jsonUsers[2].id);
            $(".channelInfo3 &gt; h3").text(jsonUsers[2].display_name);
  
            // channel N° 4
            $("#img-holder4 &gt; img").attr("src", jsonUsers[3].profile_image_url);
            $(".channelInfo4").attr("id", jsonUsers[3].id);
            $(".channelInfo4 &gt; h3").text(jsonUsers[3].display_name);
  
            // channel N° 5
            $("#img-holder5 &gt; img").attr("src", jsonUsers[4].profile_image_url);
            $(".channelInfo5").attr("id", jsonUsers[4].id);
            $(".channelInfo5 &gt; h3").text(jsonUsers[4].display_name);
  
            // channel N° 6
            $("#img-holder6 &gt; img").attr("src", jsonUsers[5].profile_image_url);
            $(".channelInfo6").attr("id", jsonUsers[5].id);
            $(".channelInfo6 &gt; h3").text(jsonUsers[5].display_name);
  
            // channel N° 7
            $("#img-holder7 &gt; img").attr("src", jsonUsers[6].profile_image_url);
            $(".channelInfo7").attr("id", jsonUsers[6].id);
            $(".channelInfo7 &gt; h3").text(jsonUsers[6].display_name);
  
            // channel N° 8
            $("#img-holder8 &gt; img").attr("src", jsonUsers[7].profile_image_url);
            $(".channelInfo8").attr("id", jsonUsers[7].id);
            $(".channelInfo8 &gt; h3").text(jsonUsers[7].display_name);
  
            var jsonStreams = streamsJson.data;
            console.log(JSON.stringify(jsonStreams, null, 2));
          },
        });
      },
    })
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/HacNass/full/MVjBRq/" rel="nofollow noreferrer">https://codepen.io/HacNass/full/MVjBRq/</a></p>
  
  <p>Thanks in advance for your help</p>