API请求后访问JS中的数据？

Question

尝试使用google fonts API学习与API等交互。每当我尝试使用点表示法解析后访问数据时，它都不起作用，例如尝试：

console.log(fonts); 

或

console.log(fonts.family);

或

console.log(font.items[1].family); 

不起作用，所有这些导致数组中的字体或未声明的项目。然而，.items的.length是很好的输出，所以我想知道我是否对如何访问这些信息有一个基本的误解？

代码：

var fontRequest = new XMLHttpRequest();
fontRequest.onreadystatechange = function() {
    if (fontRequest.readyState === 4 && fontRequest.status === 200) {
        var fonts = JSON.parse(fontRequest.responseText);
        var family = fonts.items.family;
        var statusHTML = '<ul class="fonts">';
        for (var i = 0; i < fonts.items.length; i += 1) {
            statusHTML += '<li>' + i + ' ' + family + '</li>';
            document.getElementById('googleFonts').innerHTML = statusHTML;
        }
    }

};
fontRequest.open('GET', 'https://www.googleapis.com/webfonts/v1/webfonts?key=?????');
fontRequest.send();

（密钥已被隐藏）

从请求中收到JSON的示例。

有人能告诉我，例如，如何在循环内打印出items.family？

plnkr： https://plnkr.co/edit/mabE27maz64bQwM6G1JD?p=preview

Answer 1

根据您在图片中显示的结果，您应该致电

var family = items[0].family;

输出为ABeeZee

修改

使用以下

更新您的javascript函数

var fontRequest = new XMLHttpRequest();
fontRequest.onreadystatechange = function() {
    if (fontRequest.readyState === 4 && fontRequest.status === 200) {
        var fonts = JSON.parse(fontRequest.responseText);
        //var family = fonts.items[0].family;
        var statusHTML = '<ul class="fonts">';
        for (var i = 0; i < fonts.items.length; i += 1) {
            statusHTML += '<li>' + i + ' ' + fonts.items[i].family + '</li>';
            document.getElementById('googleFonts').innerHTML = statusHTML;
        }
    }
};
fontRequest.open('GET', 'https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyAyORnIjrvRi3StxS2gVuvIUBYPY7MZXiE');
fontRequest.send();

Answer 2

将您的statusHTML分配更改为 - statusHTML += '<li>' + i + ' ' + fonts.items[i].family + '</li>';