Javascript object error in Twitch.tv viewer

JavaScript
1

I’m missing something that’s probably super-obvious in my Twitch.tv JSON API project.

Here’s my pen: https://codepen.io/ogdendavis/pen/QaOGXx

The issue is with the Javascript object in which I’m attempting to store all the stream data responses from Twitch. When I send it to the console, I can see that the data for each stream is present. However, when I try to access the information within the object in my Javascript, I get “undefined.” I also only see a series of empty objects keyed to the Twitch usernames when I print the object in a div on the page.

Here’s the code that I think is relevant:

var userArray = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]; //provided by FCC as active users
var userCount = userArray.length;
var streamResponses = {};

//loop through userArray, get stream data, and store it in streamResponses
for (i=0; i<userCount; i++) {
  currentUser = userArray[i];
  streamResponses[currentUser] = {};
  getStreams(currentUser);
  }; //end for

function getStreams(currentUser) {
  call = new URL("https://wind-bow.glitch.me/twitch-api/streams/" + currentUser);
  $.getJSON(call, function(result) {
    streamResponses[currentUser] = result;
  });
}; //end getStreams

When I call streamResponses in the console, I see this:

34649651-b2714b5a-f3b3-11e7-9617-cba20899220b.png1039×475 23.2 KB

When I print out streamResponses into a random <div> in the document itself (as a test), I see this:

34649683-31ef03b8-f3b4-11e7-87da-3d599c092722.png997×367

I’m certain I’m missing something that should be obvious, here. Who can help me become less ignorant about this?!

3

Thank you for your help! Your response got me on the right track, and after playing around with it for a while, I ended up implementing a solution after the &.get:

function waiterStreamResponses() { 
  if (streamResponses[userArray[userCount-1]].hasOwnProperty("stream")) {
    //what to do after page has called data & populated streamResponses
  } else {
    setTimeout(waiterStreamResponses, 30);
  };
}; //end waiterStreamResponses
waiterStreamResponses();

I found that comparing Object.keys(streamResponses).length to userCount didn’t work for me (which is due to me screwing something up in implementation, I’m sure), but telling the code to wait until after the last item in streamResponses was populated (by checking for a property I knew would be in the response) before doing the next thing worked swimmingly.

This was my first time dealing with asynchronous code, and it was kicking my butt. Thanks again for the assistance!