Javascript jQuery 调用 API 来填充 table 但收到未定义的特定对象调用

Question

所以我似乎遇到的问题是，当我填充我的 table 时，对象 discogsObjects.year 一致地填充我的 table "undefined" 尽管我在 devtools 中调用它时 returns 从 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>');


      }
    }
  });
});

Answer 1

"results" 数组中返回的第一个对象是对没有 year 属性的波段的描述，因此 for 循环的第一次迭代不会填充 year 数组在 discogsObjects 对象中，因此在之后的每次迭代中 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]。接下来，我递增并在下一个对象中找到年份，将其推入年份数组，但是当将其附加到 DOM 时，您试图在 i = 1 时执行 discogsObject.year[i] , 但是 discogsObject.year.length = 1 所以这是 undefined.

Javascript jQuery 调用 API 来填充 table 但收到未定义的特定对象调用

Javascript jQuery calling on API to fill table but receiving undefined for a particular object call

javascript

api

jquery

discogs-api