所以我似乎遇到的问题是,当我填充我的表对象discogsObjects。year与"undefined"一致地填充我的表,尽管当我在devtools中调用它时,它返回从API调用的年份值。我的格式与代码一致,所以我不确定问题可能是什么…
谢谢!
var discogsObjects = {
title: [],
label: [],
year: [],
};
$(".artistform").submit(function(event){
event.preventDefault();
var band = ($("#userInput").val());
var url = "https://api.discogs.com/database/search?q=" + band + "&key=olnzRAzKsxiVlgocWNCH&secret=RPCwqvPXDmFkHHNzDePPKIcMsHRmNUIK"
$.ajax({
url: url,
type: "GET",
dataType: "json",
success: (data)=> {
console.log(data.results);
for (i = 0; i<21; i++) {
for(var key in data.results[i]){
//if (key === "id") idArr.push(data.results[i][key]);
if (key === "title") discogsObjects.title.push(data.results[i][key]);
if (key === "label") discogsObjects.label.push(data.results[i][key]);
if (key === "year") discogsObjects.year.push(data.results[i][key]);
}
//$thead(.hidden).show()
// $('#resultsHead').append('<tr><td>Year of Release</td><td>Artist Release</td><td>Record Label</td></tr>');
$('#resultsTable').append('<tr><td>'+discogsObjects.title[i]+'</td><td>'+discogsObjects.year[i]+'</td><td>'+discogsObjects.label[0]+'</td></tr>');
}
}
});
});
在"results"数组中返回的第一个对象是对没有year
属性的频带的描述,因此for循环的第一次迭代不会在discogsObjects
对象中填充year
数组,因此在此后的每次迭代中,undefined
将被附加到DOM,因为它关闭了一个。
例如,使用"Maroon 5",返回的第一个对象将是:
{
"thumb":"https://api-img.discogs.com/gcuqJ3Ni4_2F_F_35xU7anju50Q=/150x150/smart/filters:strip_icc():format(jpeg):mode_rgb():quality(40)/discogs-images/A-192151-1452146008-4372.jpeg.jpg",
"title":"Maroon 5",
"uri":"/artist/192151-Maroon-5",
"resource_url":"https://api.discogs.com/artists/192151",
"type":"artist",
"id":192151
}
所以你的for循环不会找到一个名为"year"的键,并且discogsObject.year
将为空。然后在i = 0
(即undefined
)后面加上discogsObject.year[i]
。接下来,i递增,并在下一个对象中找到年份,将其推入年份数组,但当将其附加到DOM时,您试图在i = 1
时执行discogsObject.year[i]
,但discogsObject.year.length = 1
因此这是undefined
。