API 调用返回未定义的数组（spotify 应用程序）

Question

大家好，我正在开发一个使用 Spotify API 的 Javascript 网络应用程序。我正在尝试 return table 中给定艺术家的前 5 张专辑。到目前为止，我得到了 API 调用，它们 return 一个 table 显示了一个艺术家的所有专辑，没有特定的顺序。我正在尝试根据 "popularity" 将 table 缩小到前 5 名专辑，这是 table.

的第五列

 var popsort = new Array(new Array());
    var count = 0;

    $(document).ready(function () {
    $("#searchbutton").click(function () {
        search();
    });
    ,
    function search() {
        var query1 = document.getElementById('querybox').value;
        $.get("https://api.spotify.com/v1/search?q=" + query1 + "&type=artist", function (data) {
            //alert(data.artists.items[0].id);
            getSeveralAlbums(data.artists.items[0].id);
        });
    }

    function getSeveralAlbums(artistid) {
        //alert(artistid);
        $.getJSON("https://api.spotify.com/v1/artists/" + artistid + "/albums?album_type=album",
        function (json) {
            //bob = json;
            //console.log(json);
            console.log(json.items.length);
            for (var i = 0; i < json.items.length; i++) {
                createArray(json.items[i].href);
            }
            //console.log(count);
            popsort.sort(sortPopularity);
            //getAlbumInfo(json.items[i].href);
            getAlbumInfo(popsort);
        });
    }

    function getAlbumInfo(popsort) {
        var tr;
        console.log(popsort);
        // i<json.length
        // Sort the array first by popularity. And then create a for loop and print the first five. 
        tr = $('<tr/>');
        for (var i = 0; i < 5; i++) {
            tr.append("<td>" + popsort[i][0] + "</td>"); // Album Name
            tr.append("<td>" + popsort[i][1] + "</td>"); // Artist Name
            tr.append("<td>" + popsort[i][2] + "</td>"); // Release Date
            tr.append("<td>" + popsort[i][3] + "</td>"); // Number of Tracks
            tr.append("<td>" + popsort[i][4] + "</td>"); // Popularity
        }
        $('table').append(tr);

    }

    function createArray(albumhref) {
        //console.log(albumhref);
        $.getJSON(albumhref,
            function (json) {
                // i<json.length
                // Sort the array first by popularity. And then create a for loop and print the first five. 
                console.log(count);
                popsort[count][0].push(json.name);
                popsort[count][1].push(json.artists[0].name);
                popsort[count][2].push(json.release_date);
                popsort[count][3].push(json.tracks.total);
                popsort[count][4].push(json.popularity);
                ++count;
                //alert("table compiled");
                //alert("Table done");
            });
    }

    function sortPopularity(a, b) {
        if (a[4] === b[4]) {
            return 0;
        }
        else {
            return (a[4] < b[4]) ? -1 : 1;
        }
    }

});

我使用顶部的点击功能从 textbox 中获取艺术家姓名，将其传递到 return 是 [=15= 的“search”函数中].我将这个 artistid 传递给“getSeveralAlbums”函数。此函数中的 json 调用 returns 指向特定艺术家的所有专辑的 href，我想将其与流行度一起存储在二维数组中。我在底部附近的“sortPopularity”函数理想情况下会按第五个元素 "popularity" 对这个数组进行排序，然后我计划将这个排序后的数组 (popsort) 传递到 getAlbumInfo 函数，它有一个 for 循环打印 5 次，这将理想地打印 popsort 数组的前五个元素。排序后，理想情况下这将是艺术家最受欢迎的前 5 张专辑。

当我尝试运行这个程序时，它 return 对于 createArray 函数中的 popsort[count][0].push(json.name); 和它 return 都是未定义的错误getAlbumInfo 函数中 tr.append("<td>" + popsort[i][0] + "</td>"); 的错误未定义。我做错了什么？

更新：（新代码）

var popsort = new Array(new Array());
var count = 0;
var looopCount = 0;

$(document).ready(function () {

$("#searchbutton").click(function () {
    search();
});

function search() {
    var query1 = document.getElementById('querybox').value;
    $.get("https://api.spotify.com/v1/search?q=" + query1 + "&type=artist", function (data) {
        getSeveralAlbums(data.artists.items[0].id);
    });
}

function getSeveralAlbums(artistid) {
    $.getJSON("https://api.spotify.com/v1/artists/" + artistid + "/albums?album_type=album",
    function (json) {
        console.log(json.items.length);
        looopCount = json.items.length;
        for (var i = 0; i < json.items.length; i++) {
            createArray(json.items[i].href);
        }
    });
}

function getAlbumInfo(popsort) {
    var tr;
    // Sort the array first by popularity. And then create a for loop and print the first five. 
    tr = $('<tr/>');
    for (var i = 0; i < 5; i++) {
        tr.append("<td>" + popsort[i][0] + "</td>"); // Album Name
        tr.append("<td>" + popsort[i][1] + "</td>"); // Artist Name
        tr.append("<td>" + popsort[i][2] + "</td>"); // Release Date
        tr.append("<td>" + popsort[i][3] + "</td>"); // Number of Tracks
        tr.append("<td>" + popsort[i][4] + "</td>"); // Popularity
    }
    $('table').append(tr);

}

function createArray(albumhref) {
    $.getJSON(albumhref,
        function (json) {
            if (popsort.length <= count) {
                popsort.push(new Array());
            }
            // Sort the array first by popularity. And then create a for loop and print the first five. 
            popsort[count].push(json.name);
            popsort[count].push(json.artists[0].name);
            popsort[count].push(json.release_date);
            popsort[count].push(json.tracks.total);
            popsort[count].push(json.popularity);
            ++count;
            batchSort(--looopCount);
        });
}

function sortPopularity(a, b) {
    if (a[4] === b[4]) {
        return 0;
    }
    else {
        return (a[4] > b[4]) ? -1 : 1;
    }
}

function batchSort(i) {
    if (i <= 0) {
        popsort.sort(sortPopularity);
        getAlbumInfo(popsort);
    }
}
});

Answer 1

首先是您正在访问 createArray() 中 popsort 的未定义键，请改用 .push()。其次，getAlbumInfo(sortPopularity); 函数已经被调用，而第一个 $.getJSON(albumhref, fn...); 响应还没有 returned 从而留下一个空数组来访问。这就是为什么在访问 popsort

时得到未定义的 return

我要做的是创建一个递减计数器并将其添加到 createArray 的 $.getJSON() 回调中，如下所示：

var popsort = new Array(new Array());
    var count = 0;
    var looopCount = 0;

    function getSeveralAlbums(artistid) {
        $.getJSON("https://api.spotify.com/v1/artists/" + artistid + "/albums?album_type=album",
        function (json) {
            console.log(json.items.length);
            looopCount = json.items.length
            for (var i = 0; i < json.items.length; i++) {
                createArray(json.items[i].href);
            }
            // call both popsort.sort(sortPopularity); and getAlbumInfo(popsort); after all the data is loaded to popsort, not here.
        });
    }

    function createArray(albumhref) {
        $.getJSON(albumhref,
            function (json) {
                if (popsort.length <= count) {
                    // if the length of popsort is less than count, it means that that index(count) is not yet present in popsort
                    // push to add an item with index=count to popsort
                    popsort.push(new Array());
                }
                popsort[count].push(json.name);
                popsort[count].push(json.artists[0].name);
                popsort[count].push(json.release_date);
                popsort[count].push(json.tracks.total);
                popsort[count].push(json.popularity);
                ++count;

                batchSort(--looopCount);
            });
    }

    function batchSort(i) {
        if (i <= 0) {
            popsort.sort(sortPopularity);
            getAlbumInfo(popsort);
        }
    }

});

function getAlbumInfo(popsort) {
    for (var i = 0; i < 5; i++) {
        tr.append("<tr><td>" + popsort[i][0] + "</td>"); // Album Name
        tr.append("<td>" + popsort[i][1] + "</td>"); // Artist Name
        tr.append("<td>" + popsort[i][2] + "</td>"); // Release Date
        tr.append("<td>" + popsort[i][3] + "</td>"); // Number of Tracks
        tr.append("<td>" + popsort[i][4] + "</td></tr>"); // Popularity
    }

}

虽然还没有测试过，但就是这么想的。希望对你有帮助。

API 调用返回未定义的数组（spotify 应用程序）

Arrays returning undefined for API calls (spotify app)

javascript

api

json

spotify

multidimensional-array