jQuery works only with browser's first boot

Question

I am completing an exercise from Free Code Camp that requires that I interact with the TwitchTV API.

I am using a jQuery file which I include in my HTML file right before the closing body tag - please see below for the code.

I am using the last line of the code to check that I am getting the data.

The code work fine when I first boot up the browser. However, if I refresh (to check my work after making changes), the output to the console will be an empty array, which is not what I expected.

Can someone help me figure out why this behavior occurs? Also, how would I be able to fix it?

$(document).ready(function() {
  // on document ready
  var baseEndpoint = "https://api.twitch.tv/kraken/streams/"
  var users = ["medrybw", "freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","comster404","brunofin","thomasballinger","noobs2ninjas","beohoff"]
  var JSONP = "?callback=?"

  // all users
  var allUsers = [];

  // for each user
  users.forEach(function(currUser) {
    // make a request to the API
    $.getJSON(baseEndpoint + currUser + JSONP, function(data) {
      // gather and format information for user
      var user = {};

      // userName
      user["userName"] = currUser;

      // streamStatus
      if (data["stream"] === null) {
        user["streamStatus"] = "user-off";
      }
      else {
        user["streamStatus"] = "user-on";
      }

      // img
      if (user["streamStatus"] === "user-on") {
        user["img"] = data["stream"]["channel"]["logo"];
      }
      else {
        user["img"] = "http://static-cdn.jtvnw.net/jtv-static/404_preview-300x300.png";
      }

      allUsers.push(user);
    });
  });

  $(document).ajaxComplete(function() {
    console.log(allUsers);
  });
});

Did you add console lines to see if the code is being called and where it is failing? — epascarello, Jun 28 '15 at 03:24
My guess, the API accepts limited requests at a time. Please add debugger to check where the code fails. — Shaunak D, Jun 28 '15 at 03:25
The console.log happens before the json is loaded. If you put your console.log after allUsers.push(user); ou should see whether or not the array gets populated — Sebastian Nette, Jun 28 '15 at 03:30
Trying to eat the delivery pizza before it gets delivered to your house. Asynchronous calls 101 — epascarello, Jun 28 '15 at 03:32

score 1 · Accepted Answer · edited May 23 '17 at 12:14

1

The the thing about AJAX is the asynchronous part. Check this answer out about that What does Asynchronous means in Ajax?.

In your code example you are asking JS to show the value of the users array before the api calls have completed, so its empty.

In this plunker http://plnkr.co/edit/dKfuP9XDhidWMskmiop3?p=preview you can see I have used an event binder to output the user array each time an AJAX call is completed.

$( document ).ajaxComplete(function() {
 console.log(allUsers);
});

Output this way you can see the array build as each call to the api is returned.

Good luck!

edited May 23 '17 at 12:14

Community

1
1

answered Jun 28 '15 at 03:49

luckyape

722
8
22

thanks for your reply. It certainly explains the problem I am running into, but not the solution. The new code doesn't output anything to the console log. Also, would it not be equivalent to adding `console.log(allUsers)` immediately after `allUsers.push(user)`? – Steven L. Jun 28 '15 at 14:17
@user245185 You are correct about the placing the console.log(allUsers) immediately after allUsers.push(user), as they are both in callbacks functions for the ajax request. Did you test the implementation using the plunker link http://plnkr.co/edit/dKfuP9XDhidWMskmiop3? testing seems to output to the console. – luckyape Jun 28 '15 at 18:39

jQuery works only with browser's first boot

1 Answers1