未定义API调用的数组(Spotify应用程序)
嘿家伙我正在使用Spotify API的JavaScript网页应用程序。 我正试图将表中给定艺术家的前五张专辑归还。 到目前为止,我的API调用工作正常,他们返回一张表格,显示一位艺术家的所有专辑,没有特别的顺序。 我试图根据表格中的第五列“流行度”将表格缩小到前5张专辑。
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
获取艺术家姓名,并将其传递到返回artistid
的“ search
”功能中。 我通过这个artistid进入“ getSeveralAlbums
”功能。 此函数中的json调用将hrefs返回给我想存储在2D数组中的特定艺术家的所有专辑以及流行度。 靠近底部的我的“ sortPopularity
”函数将理想地按照“流行度”的第五个元素对此数组进行排序,然后我计划将此排序数组( popsort
)传递给getAlbumInfo
函数,该函数具有for循环打印5次,这将理想打印popsort
数组的前五个元素。 排序后,理想情况下,将成为艺术家的前5名最受欢迎的专辑。
当我尝试运行这个程序时,它会为popsort[count][0].push(json.name);
返回一个未定义的错误popsort[count][0].push(json.name);
在createArray
函数中,它返回一个未定义为tr.append("<td>" + popsort[i][0] + "</td>");
在getAlbumInfo
函数中。 我究竟做错了什么?
更新:(新代码)
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);
}
}
});
首先是,你正在访问的未定义关键popsort
在createArray()
使用.push()
来代替。 其次, getAlbumInfo(sortPopularity);
函数已经被调用,而第一个$.getJSON(albumhref, fn...);
响应还没有返回,因此留下一个空数组来访问。 这就是为什么你访问popsort
时得到一个未定义的返回popsort
我要做的是我将创建一个递减计数器并将其添加到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
}
}
虽然还没有测试过,但这就是想法..希望它有帮助。
链接地址: http://www.djcxy.com/p/55585.html