javascript - 如何使用 getJSON 解析和列出来自谷歌的字体

Question

我已经从 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>

这是正在进行的更改 change_font_group()

function change_font_group(){
$(document).ready(function() {
    $.getJSON('https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key=AIzaSyD8wNQ45GwEr0bZljjRtP8131v42rrFhac', function(response) {
        alert('json object fetched successfully!');
        alert(response[0]);
    });
})
}

这是 googleapi

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

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

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

</div>

知道怎么做吗？

Answer 1

response[0] 中没有数据，因此您应该像这样获取字体列表:

function change_font_group(){
  $(document).ready(function() {
      $.getJSON('https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key=AIzaSyD8wNQ45GwEr0bZljjRtP8131v42rrFhac',    function(response) {
        var items = response.items;
        var listElements = '';
        items.forEach(function(item){
          listElements+='<li>' + item.family + '</li>';
        });
        $('#font_families_list').html('<ul>'+listElements+'</ul>');
    });
  })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key=AIzaSyD8wNQ45GwEr0bZljjRtP8131v42rrFhac"></script>

<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>

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