Javascript 如何使用getJSON从google解析并列出字体

我已经从GoogleAPI中提取并加载了所有字体

现在我要做的是在下拉菜单中加载字体选择更改

下拉列表是字体的类别

这是下拉选择列表

<select name="pick_font" class="form-input" onchange="change_font_group()">
    <option value="serif">Serif</option>
    <option value="sans_serif">Sans Serif</option>
    <option value="display">Display</option>
    <option value="handwriting">Handwriting</option>
    <option value="monospace">Monospace</option>
</select>

这是古里皮

https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key=AIzaSyD8wNQ45GwEr0bZljjRtP8131v42rrFhac

我需要把所有的字体都放在这里

<div class="form-group" id="font_families_list">

</div>

---

你知道怎么做吗？

响应[0]中没有数据，因此你应该这样做以获得如下字体列表：

功能更改\u字体\u组（）{
$（文档）.ready（函数（）{
$.getJSON（'https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key=AIzaSyD8wNQ45GwEr0bZljjRtP8131v42rrFhac，函数（响应）{
var items=response.items；
var列表元素=“”；
items.forEach（功能（项目）{
列表元素+='
'+item.family+'
'；
});
$（“#font#u families_list”）.html（“
”+列表元素+”
”）；
});
})
}

衬线
无衬线
展示
笔迹
单空间

但这会加载所有…我如何进行过滤…例如，在手写下，它只会显示Roboto。。。

<div class="form-group" id="font_families_list">

</div>