javascript - 我无法从 spotify 的 API 获取图像
问题描述
我正在尝试创建一个站点,在该站点中,通过 Spotify Web API,我显示某个元素(艺术家、曲目、专辑等)的信息。但是,在答案对象的背景中,我想设置由 Spotify 直接提供的图像,但经过多次尝试,我仍然无法。这是我的功能。
function ricercaArtista(){
var xhr = new XMLHttpRequest();
var artist =document.getElementById("artista").value;
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
var result = '';
for(var i = 0; i < response.artists.items.length; i++){
console.log(response.artists.items[i]);
result +='<div class="panel panel-primary" style="background:url('+
response.artists.items[i].images[1].url+');"><div class="panel-body">' +
'name : ' + response.artists.items[i].name + '<br/>' +
'popularity : ' + response.artists.items[i].popularity + '<br/>' +
'type : ' + response.artists.items[i].type + '</div></div>';
}
alert
document.getElementById("artists").innerHTML = result;
}
};
xhr.open('GET', "https://api.spotify.com/v1/search?q="+artist+"&type=artist&market=IT&limit=10&offset=5", true);
xhr.setRequestHeader('Accept', 'application/json');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer BQAnHZ_1kZFp_6rNx7jWXz-wfK9KTp2gTmuviXisgsJy8IAjnF_Hbo701Y5UMu7viFb0vaKG6wBAcLQMhfNUBjzGZpt1M3UaWGEKWDVmziEh-s6ECFNeVFCifdD3C38w3q_jGdnovDUlek2f463hnyPUlpoC4xb2uA');
xhr.send();
}
Chrome 控制台的错误是:
Index.html:29 Uncaught TypeError: Cannot read property 'url' of undefined at XMLHttpRequest.xhr.onreadystatechange
解决方案
@Pointy 是对的,一些记录在图像路径上有一个空数组。看看下面的 fetch 它返回不同的记录来搜索 Bob marley。您可以在控制台中看到结果。在这种情况下,您需要检查图像路径是否为空做一些事情。
fetch("https://api.spotify.com/v1/search?q=bob marley&type=artist&market=IT&limit=10&offset=5")
.then(res=> res.json())
.then(data=> console.log(data.artists.items))
.catch(err=> console.log(err));
推荐阅读
- laravel - Laravel 8路由问题,它给出了这样的错误
- python - 如何在 django 用户表中添加列并直接从管理页面访问它?
- python - 我试图用 Selenium Python 在亚马逊上自动购买东西
- php - 如何使用 PHP 中的 LDAP 过滤器获取特定“ou”中的所有用户?
- mysql - MySQL - 当时间戳是日期的一部分时,如何查找昨天的记录
- python-2.7 - Docker 无法端口转发到容器,返回套接字错误 99
- angular - RouterLink 到另一个组件,其路径是动态创建的
- r - R中的约束概率回归
- postgresql - 为什么在 PostgreSQL 中的 UPDATE 操作之后,该行转到最后一个位置?
- python - 有没有办法点击同一个图标?