Как вывести данные из запроса fetch?

Question

[JorikArbuzov]

Доброго времени суток!
Встал полностью.
Задание такое "сделать запрос по URL https://picsum.photos/v2/list?page=1&limit=10 и после получения данный вывести список картинок на экран"
Не понимаю, каким образом забрать картинки полученные из fetch и вывести их.
Часть кода:

const options = {
            method: 'GET',
            mode: 'cors'
        };
        fetch(`https://picsum.photos/v2/list?page=${heightValue}&limit=${weightValue}`, options)
        .then((response) => {
        console.log('response', response);
        return response.json();
        })
        .then((data) => {
        console.log('data', data);
        })
        .catch(() => { console.log('error') });

Answer 1

[Александр Епихин]

Так а в чем именно у вас проблема? В data вы получаете массив изображений?

Comments

[JorikArbuzov]

Да, получаю. А вот из data как забрать не понимаю. Только учусь, наверное пропустил что-то?

[Александр Епихин]

data представляет собой массив, верно? Элементом массива является объект который описывает изображение. У каждого объекта есть свойство download_url, в этом свойстве хранится путь для изображения https://yadi.sk/i/hRcnBlj3mnhVeA. Это свойство вам нужно использовать как атрибут src для изображения.
Вам необходимо пройти весь массив и на каждой итерации создать изображение и каждому изображению указать в качестве атрибута src значение download_url и вставить на страницу каждое изображение.
Как это сделаете я объясню как можно будет оптимизировать вставку изображений на страницу.

[JorikArbuzov]

Александр Епихин,

document.querySelector('.result').insertAdjacentHTML('beforeend', data.map(item => `<img src="${item.download_url}">`).join(''))

Оптимизация путем загрузки сначала низкокачественного изображения, а затем асинхронно на фоне высококачественного?

[Александр Епихин]

Нет. Вы сделали по аналогии что подсказали выше. Просто вставили строку. Я же вам предложил вставить html элемент. Сделайте мой вариант и я расскажу вам в чем отличия и когда и какой вариант стоит использовать.

[JorikArbuzov]

Александр Епихин,

data.map(function(item){
            let result = document.querySelector('.result')
            let image = document.createElement('img')
            image.src = item.download_url
            result.append(image)
        })

[Александр Епихин]

Хорошо.
result нужно вынести из цикла, чтобы на каждой итерации не находить его.
Один раз нашли и запомнили.
Вы сделали как я и просил, но тут есть проблема.
В каждой итерации происходит вставка элемента в DOM дерево.
Это не хорошо. Операции с DOM деревом нужно минимизировать.
Для этого нужно произвести вставку за один раз.
Нагенерировать изображения, сложить их в одно место и после этого вставить в result.
Тут есть два варианта:
1) Создать div и добавлять изображения в него, а потом div вставить в result. Но мы получим в DOM лишний элемент который нам возможно не нужен.
2) Создать DocumentFragment и вставить изображения в него, после вставки DocumentFragment в DOM "исчезнет".

const result = document.querySelector('.result');
const fragment = new DocumentFragment();
data.map(function(item){
    const image = document.createElement('img');
    image.src = item.download_url;
    fragment.append(image);
})
result.append(fragment);

При вставке через insertAdjacentHTML, вставляется обычный текст, который после вставки "превращается" в html элементы.
Но у нас не остается никакой связи со вставленными элементами.
Например нам нужно на каждое изображение добавить обработчик события клика, нам нужно будет сначала найти (например через querySelectorAll) те элементы что мы вставили и только потом добавлять обработчик.
Это не очень хорошо/удобно.
insertAdjacentHTML и подобные стоит использовать тогда когда вам нужно что-то вставить и забыть про это.
В случае с созданием элементов через createElement, у нас остается ссылка на создаваемый элемент.
Т.е. мы могли бы в коде выше на каждой итерации добавить к изображению обработчик клика.
Создавать элементы через createElement стоит тогда когда вам нужно чтобы остались ссылки на вставляемые элементы чтобы в дальнейшем как-то с ними взаимодействовать.

[JorikArbuzov]

Александр Епихин, Большое спасибо!

Answer 2

[Tim]

Comments

[Tim]

[JorikArbuzov]

Спасибо!

Answer 3

[YoloV]

Пройдитесь по массиву data и выведите изображения(url) в тэг img