Question

没什么问题。我在玩Unsplash API，但无法继续前进。 A可以列出一堆照片，但无法使搜索正常工作。收到此错误：

未捕获的TypeError：无法读取未定义的属性“ small”，位于   XMLHttpRequest.xhr.onload（main.js：15）

xhr.onload @ main.js：15

加载（异步）

loadImages @ main.js：7

document.getElementById("button").addEventListener("click", loadImages);

function loadImages() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://api.unsplash.com/search/photos?page=1&query=office&client_id=15020f1f31839a088aff745486e7a469cd064761ff165c9d3d9f57de77d10348", true);

    xhr.onload = function() {
        if(this.status == 200) {
            var images = JSON.parse(this.responseText);

            var output = "";
            for(var i in images) {
                output +=
                '<div class="image">' +
                '<img src="'+images[i].urls.small+'">'
                '</div>';
            }

            document.getElementById("images").innerHTML = output;
            console.log(images);
        }

    }
    xhr.send();
}

基本上，在更改该URL之前一切正常（第一个链接正常运行，第二个链接无效）。但是唯一的区别是...

https://api.unsplash.com/photos?client_id=

https://api.unsplash.com/search/photos?page=1&query=office&client_id=

有人可以帮我吗？

Answer 1

似乎响应的结构与您期望的略有不同。您期望：

[
    {
        "urls": {
            "small": ...
            ...
        },
        ....
    },
    ...
]

但是，根目录还有一个附加级别：

{  
    "total": 8519,
    "total_pages":852,
    "results": [
        {
            "urls": {
                "small": ...
                ...
            },
            ....
        },
        ...
    ],
    ...
}

所以代替：

var images = JSON.parse(this.responseText);

您应该写：

var response = JSON.parse(this.responseText);
var images = response.results;

无法读取XMLHttpRequest.xhr.onload中的undefined属性（Unsplash API）

1 个答案: