Free Code Camp: TWITCH TV API: Trying to move everything from getJSONs to AJAX requests

Question

So here's my codepen: http://codepen.io/muzzotech/pen/mAodAv

Twitch's API now requires Client ID tokens so I had to change all of my getJSON's over to AJAX requests, but it isn't working. None of the followers are appearing below the headers of the html. When I run javascript console, I get two kinds of errors. The first is that https://api.twitch.tv/kraken/streams/+ following[i] + "/?callback=?"gives me a 400 Bad Request (It also does if I remove the slash so that it reads "?callback=?") and I get the "pen.js:77 Uncaught ReferenceError: data3 is not defined" where it tries to use "data3._links.channel" as the URL. I'm rather new to all of this so I would love some direction with this.

Also, there was a section that originally had a $.getJSON.done part but I don't know how to put that into AJAX.

There are nested `$.ajax()` calls within nested `for` loops at `javascript` at codepen, see http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example/. Try substituting `$.map()` for `for` loops, using `$.when.apply()` pattern http://stackoverflow.com/questions/14777031/what-does-when-apply-somearray-do?s=2|2.2304. Can you include `html`, `javascript` at Question? — guest271314, Oct 24 '16 at 20:55
I just saw you updated your response. I will include html & javascript with the question. Thanks. — muzzo, Oct 24 '16 at 21:03
Please don't add all of the tags to the title. It is unnecessary and makes it harder to know what your question is, especially when you make them all uppercase. Also, you should include a [mcve] in the question itself, not on a third-party site. — Heretic Monkey, Oct 24 '16 at 21:33
@guest271314 Yeah, I fixed the data1.stream thing. The expected URL's are like `https://api.twitch.tv/kraken/streams/noobs2ninjas?callback=?` and they are for showing the icon, username and status of each person on or offline. — muzzo, Oct 24 '16 at 21:35
@muzzo The correct URL is being passed. Though server appears to not expect that request — guest271314, Oct 24 '16 at 21:35
@MikeMcCaughan: Changed the question title to best fit the question. Thanks. — muzzo, Oct 24 '16 at 21:37
@guest271314: I did that in order to go if the callback is like "hey, this isn't what we're looking for" then it should be okay. Apparently, it is not. — muzzo, Oct 24 '16 at 21:43
Was able to perform successful request, though there is no `follows` property at `data2` object. Also, you should probably pass parameters to `follows()` call within `success` handler — guest271314, Oct 24 '16 at 21:43
Actually, there is a `.follows` property at `data2`. Though there are no `.error` properties — guest271314, Oct 24 '16 at 21:47
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/126556/discussion-between-guest271314-and-muzzo). — guest271314, Oct 24 '16 at 21:56

score 1 · Answer 1 · answered Oct 24 '16 at 22:00

Substituting $.when.apply(), $.map() for for loops. Note, no .error property is set at any of the returned objects. Set contentType to "json" at $.ajaxSetup(), set dataType to "json" at $.ajax() requests.

$(document).ready(function() {
  var following = [];
  var logo;
  var status;
  var name;

  function follower(logo, name, status) {
    $("#followerInfo").prepend("<div class = 'row'>" + "<div class='col-md-4>" + "<img src='" + logo + "'>" + "</div>" + "<div class='col-md-4>" + name + "</div>" + "<div class='col-md-4>" + status + "</div></div>");
  }

  $.ajaxSetup({
    contentType: "json"
  })


  $.ajax({
    type: "GET",
    dataType:"json",
    url: "https://api.twitch.tv/kraken/streams/freecodecamp",
    headers: {
      'Client-ID': 'rp0e2c4y3nqc392dgwehvbhg0cs5r8c'
    },
    success: function(data1) {
      console.log(data1);
      if (data1.stream === null) {
        $("#fccStatus").html("Free Code Camp is Currently OFFLINE");
      } else {
        $("#fccStatus").html("Free Code Camp is Currently ONLINE");
      }
    }
  });

  $.ajax({
    type: "GET",
    dataType:"json",
    url: "https://api.twitch.tv/kraken/users/freecodecamp/follows/channels/",
    headers: {
      'Client-ID': 'rp0e2c4y3nqc392dgwehvbhg0cs5r8c'
    },
    success: function(data2) {
      console.log(data2);
      for (var i = 0; i < data2.follows.length; i++) {
        var displayName = data2.follows[i].channel.display_name;
        following.push(displayName);
      }

      $.when.apply($, $.map(following, function(_following) {
        return $.ajax({
          type: "GET",
          url: "https://api.twitch.tv/kraken/streams/" + _following /* + "?callback=?" */,
          headers: {
            'Client-ID': 'rp0e2c4y3nqc392dgwehvbhg0cs5r8c'
          },
          success: function(data3) {
            if (data3.error) {
              logo = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Thomas_Organ_Crybaby.jpg/180px-Thomas_Organ_Crybaby.jpg";
              name = data3.message;
              status = data3.error;
              follower(log, name, status);
            }

            if (data3.stream === null) {
              $.ajax({
                type: "GET",
                dataType:"json",
                url: data3._links.channel,
                headers: {
                  'Client-ID': 'rp0e2c4y3nqc392dgwehvbhg0cs5r8c'
                },
                success: function(data4) {
                  if (data4.error) {
                    status = "OFFLINE";
                    logo = data4.logo;
                    name = data4.display_name;
                    if (logo === null) {
                      logo = "http://images.allposters.com/images/ATA/24802BP.jpg";
                    }
                    follower(logo, name, status);
                  }
                }

              });
            }
          }
        });
      }));

      $.when.apply($, $.map(following, function(_following) {
        return $.ajax({
          type: "GET",
          dataType:"json",
          url: "https://api.twitch.tv/kraken/streams/" + _following,
          headers: {
            'Client-ID': 'rp0e2c4y3nqc392dgwehvbhg0cs5r8c'
          },
          success: function(data5) {
            console.log(data5);
            if (data5.error) {
              logo = data4.stream.channel.logo;
              status = data4.stream.channel.status;
              name = data4.stream.channel.display_name;
              follower(logo, name, status);
            }
          }

        });

      }));
    }
    });
});

plnkr http://plnkr.co/edit/NXYRweuIdv6sQrUnqkWX?p=preview

That brings me back to the main issue which is the logos, names, and statuses of each person isn't showing up on screen. — muzzo, Oct 24 '16 at 22:26
There is no `.error` property at returned `dataN` object. What should occur if `dataN` does not have a `.error` property and `dataN.stream` is `null`? — guest271314, Oct 24 '16 at 22:32

Free Code Camp: TWITCH TV API: Trying to move everything from getJSONs to AJAX requests

1 Answers1