Невозможно прочитать свойство undefined в XMLHttpRequest.xhr.onload (API Unsplash)

Question

с небольшой проблемой. Я немного играл с Unsplash API, но не могу двигаться вперед. Я смог перечислить кучу фотографий, но я не могу заставить поиск работать. Получение этой ошибки:

Uncaught TypeError: Невозможно прочитать свойство 'small' из undefined в 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;