Spotify API - 自动完成搜索结果为空

Question

使用 Spotify API - 我想在我输入时使用 jQuery 自动完成包含艺术家的字段。到目前为止，我正在处理以下内容：

HTML：

<input type="text" class="text-box" placeholder="Enter Artist" id="artist-input"> 

Javascript：

$(document).ready(function() {

  $("#artist-input").autocomplete({
    source: function(request, response) {
        $.ajax({
            type: "GET",
            url: "https://api.spotify.com/v1/search",
            dataType: "json",
            data: {
                type: "artist",
                limit: 3,
                contentType: "application/json; charset=utf-8",
                format: "json",
                q: request.term
            },
            success: function(data) {
                response($.map(data.artists, function(item) {
                    return {
                        label: item.name,
                        value: item.name,
                        id: item.id
                    }
                }));
            }
        });
    },
    minLength: 3,
    select: function(event, ui) {
        $("#artist-input").val(ui.item.value);
        window.location.href = "#" + ui.item.value;
    },
});

});

运行这个，结果：

functions.js:35 Uncaught TypeError: Cannot read property 'name' of null

所以我的问题是我是否需要在此过程运行之前进行某种身份验证？我的思考过程是它正在拨打电话，但它返回为空，我错过了一个额外的步骤......

这是一个带有此示例的代码笔：http://codepen.io/anon/pen/PGKLpj

Answer 1

您使用的数据的结构略有不同。它是 data.artists.items 而不是 data.artists。如果你遍历正确的属性，它就可以正常工作。

看看这支笔：http://codepen.io/anon/pen/qaXvob

注意：有时只需要console.log(data); 来查看 json 结构是否与您认为的相符。