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

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

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

Answer 1

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

检查这支笔:http://codepen.io/anon/pen/qaXvob

注意:它有时会帮助 console.log(data); 看看 json 结构是否与您认为的相符。