Retrieving JSON Values Not Working - JavaScript/jQuery

Question

Below is the code that I am using to retrieve a certain font name from the API (which contains a list of fonts available).

The problem is that I am only able to retrieve the first 20 values. By changing the 19 to any number after that, the family value is not retrieved.

$.getJSON("https://www.googleapis.com/webfonts/v1/webfonts?key=***", function(result){
        $.each(result, function(i, field){
           $("div").append([field][0][19]['family']);
        });      
    });

Here is an example fiddle:

https://jsfiddle.net/tLhea2eo/2/

Answer 1

All the fonts are in the array result.items which has length of 82

$.getJSON("https://www.googleapis.com/webfonts/v1/webfonts?key=***", function(result) {

  $.each(result.items, function(i, item) {
    $("ul").append('<li>' + item.family + '</li>');
  });
});

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