'Cant read property of undefined' error in Twitch API response

Question

I am trying to display all display_name values of this JSON page (the max is 25), however I get an error of "cant read property of undefined". My code is as follows:

$(document).ready(function(){
  var url= "https://api.twitch.tv/kraken/channels/sodapoppin/follows?client_id=40pbvj5imeg5ma36gla9p8ryfkyyyb&limit=100";
  $("button").click(function() {
    $.getJSON(url, function(result) {
      $.each(result, function(string, field) {
        // $.each(string, function(k, v) {
        $("#fccStatus").append(string.follows.user + " ");
        // });
      });
    });
  });
}); 

Thank you guys in advance!

Answer 1

There's two issues. Firstly you need to iterate over result.follows, not result. Secondly, the string argument is actually the integer index of the current object in the array. You need to use field instead. Try this:

$(document).ready(function() {
  var url = "https://api.twitch.tv/kraken/channels/sodapoppin/follows?client_id=40pbvj5imeg5ma36gla9p8ryfkyyyb&limit=100";
  
  $("button").click(function() {
    $.getJSON(url, function(result) {
      $.each(result.follows, function(i, field) {
        $("#fccStatus").append('<p>' + field.user.display_name + '</p>');
      });
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Click me</button>
<div id="fccStatus"></div>

Note that I changed the output HTML to show the user's display_name wrapped in p elements for clarity, but this can be easily amended if needed.