Twitch TV viewer undefined variable from API

Hi I’m currently trying to do the twitch api viewer project and I’ve got a problem with getting undefined back the when I try and access the game info. When I try and access the object as a whole in the same place it seems to work fine.

$(document).ready(function() {
  for (let i = 0; i < streams.length; i++) {
    $.getJSON(
      "https://wind-bow.gomix.me/twitch-api/streams/" +
        streams[i] +
        "?callback=?",
      function(x) {
        var test = x.game;
        var streamInfo = '<div class="card card-inverse"><div class="card-block"><h4 class="card-title">' + streams[i] + '</h4>' + isLive(x.stream);
          if (live === true){
            streamInfo += '<p>' + test + '</p></div></div>';
            console.log(test);
          }else{
            streamInfo += '</div></div>';
          }
        $("#feedInfo").append(streamInfo);
      }
    );
  }
});

My full code is at https://codepen.io/tom42s/pen/rwmbxe

Anyone have any ideas why its not working?

Thanks,

Forgot to mention its the value of x.game which is undefined.