【问题标题】:I could not acquire the image from the API of spotify我无法从 spotify 的 API 获取图像
【发布时间】:2018-06-02 13:05:30
【问题描述】:

我正在尝试创建一个站点,在该站点中,我通过 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

【问题讨论】:

  • 这个错误意味着response.artists.items[i].images[1]undefined。为什么[1]?你知道至少会有两张图片吗? (JavaScript 数组从 0 开始,而不是 1。)
  • 是的,在 json 响应中有 3 张图片
  • 显然不是,否则您不会收到该错误。您可以添加一个显式测试,以确保在尝试访问“url”属性之前获得的每个“项目”都有图像。

标签: javascript json spotify


【解决方案1】:

@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));

【讨论】:

    猜你喜欢
    • 2020-10-22
    • 2018-01-08
    • 1970-01-01
    • 2015-02-14
    • 2022-06-13
    • 2020-10-10
    • 1970-01-01
    • 2015-09-20
    • 1970-01-01
    相关资源
    最近更新 更多