Ajax 请求，格式化结果时，如果我添加超过 2 行代码，某些元素会失败

Posted 2023-04-15

【中文标题】Ajax 请求，格式化结果时，如果我添加超过 2 行代码，某些元素会失败

【英文标题】：Ajax request, when formatting the results, certain elements fail if I add over 2 lines of code

【发布时间】：2019-04-13 21:33:07

【问题描述】：

对不起，这个问题的措辞非常奇怪，我不知道如何解释。基本上，我有一个作为搜索的文本输入。每当您输入字母或单词时，它都会向 Spotify API 发出请求并返回 5 个最佳匹配结果；代码如下。

$("#SongSearch").keyup(function()
                  $.ajax(
            url: "https://api.spotify.com/v1/search?q=" + encodeURI(document.getElementById("SongSearch").value) + "&type=track&market=US&limit=5&offset=0",
            headers: 
              'Authorization': 'Bearer ' + access_token
            ,
            success: function(InfoGained) 
                           document.getElementById("result1").innerhtml = InfoGained.tracks.items[0].name + ", " + InfoGained.tracks.items[0].artists[0].name;
                           document.getElementById("result2").innerHTML = InfoGained.tracks.items[1].name + ", " + InfoGained.tracks.items[1].artists[1].name;
                           document.getElementById("result3").innerHTML = InfoGained.tracks.items[2].name + ", " + InfoGained.tracks.items[2].artists[2].name;
                           document.getElementById("result4").innerHTML = InfoGained.tracks.items[3].name + ", " + InfoGained.tracks.items[3].artists[3].name;
                           document.getElementById("result5").innerHTML = InfoGained.tracks.items[4].name + ", " + InfoGained.tracks.items[4].artists[4].name;
            
        );
                );

此代码正确调用 API 并获取结果。但是，在格式化时，如果我在其中添加了两行以上的 document.getElementByID... 行，则只有两行有效。例如，这有效：

$("#SongSearch").keyup(function()
                  $.ajax(
            url: "https://api.spotify.com/v1/search?q=" + encodeURI(document.getElementById("SongSearch").value) + "&type=track&market=US&limit=5&offset=0",
            headers: 
              'Authorization': 'Bearer ' + access_token
            ,
            success: function(InfoGained) 
                           document.getElementById("result1").innerHTML = InfoGained.tracks.items[0].name + ", " + InfoGained.tracks.items[0].artists[0].name;
                           document.getElementById("result2").innerHTML = InfoGained.tracks.items[1].name + ", " + InfoGained.tracks.items[1].artists[1].name;
            
        );
                );

但是超过两行的document.getElementID...，比如列出的第一段代码导致错误：“Uncaught TypeError: Cannot read property 'name' of undefined”。感谢任何帮助，因为我真的不知道是什么原因造成的。提前致谢， 贾斯汀

【问题讨论】：

1) 为什么不使用 jQuery 来选择元素？ 2) 您应该为您的问题添加一个 ajax 响应示例，因为您很可能从一个不存在的数组元素中选择一个属性。

我猜你真的很想查看artists[0].name 的所有曲目。没有多少曲目有 5 位艺术家。

另外，尝试学习如何调试您的代码。您确实在此处的错误消息中包含了所有内容，并且您可以通过使用 console.log(InfoGained) 或类似内容检查响应来快速找到错误。自己找到它的速度要快得多。

好的，所以，一些澄清。每个呼叫单独工作。所以如果我打电话给 tracking.items[4].name + ... 它会起作用，所以我知道这不是问题所在。只有当我将它们一起调用/调用超过 2 个时才会出错。此外，它单独获取每首曲目的艺术家，而不是从一首曲目中获得 5 名艺术家。

您应该创建一个循环来遍历数组并处理循环内的特定实例

【参考方案1】：

我看了一两个小时后才意识到 InfoGained.tracks.items[4].artists[4].name;正在为第 5 首歌打电话给第 5 位艺术家。应该是 InfoGained.tracks.items[4].artists[0].name；感谢大家的帮助，尤其是 Frax！