@Deadorik

Как вывести несколько элементов из массива?

Получаю по API 10 картинок. Пытаюсь вывести несколько картинок одновременно, но выводится только последняя. Как сделать, чтобы выводилось несколько картинок?

Пытался сделать циклом, но тогда нет доступа к url других картинок.

const gif = response.data[0, 1, 2].images.fixed_height.url; // Добрался до картинки
  • Вопрос задан
  • 112 просмотров
Решения вопроса 1
@Deadorik Автор вопроса
Спасибо всем. Решение нашел методом проб и ошибок.

Получилось обойти свойство data и номер объекта через for of.

async function getGif() {
  // Получаем значение которое ввел пользователь
  const search = document.querySelector(".search").value;

  // Потребляем promise
  const result = await fetch(
    `https://api.giphy.com/v1/gifs/search?api_key=0jBZ9yJSijGGR9BMAVlrdWa5v6TB5HtM&q=${search}&limit=10&offset=0&rating=g&lang=en` // Отправляем что ввел пользователь на сервер и выдаем по запросу
  );
  const response = await result.json();

  const gif2 = response.data; // Углубляемся в пришедший массив

  for (let item of gif2) {
    // Запускаю цикл чтобы получить все элементы которые прислал API (10 штук). Благодаря обходу массива for of удалось обойти свойство data.
    let urlImg = item.images.fixed_height.url; // Проваливаюсь до urloв и записываю путь к urlам в переменную
    const image = document.createElement("img");
    image.setAttribute("src", urlImg); // src ссылается на переменную
    image.setAttribute("class", "container_gif");
    const container = document.querySelector(".container");
    container.append(image);
  }
}

const getNavigation = document.querySelector(".navigation");

//======== Создал кнопку ===================
const button = document.createElement("button");
button.innerText = "Найти";
getNavigation.append(button);
button.setAttribute("class", "button_find");

// Слушаю событие клик по кнопке которое будет вызывать функцию getGif
button.addEventListener("click", getGif);
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
TheSnegok
@TheSnegok
const mas = [0, 1, 2, 3, 4, 5];
for(let i = 0; i < 2; i++) console.log(mas[i]);

i - это индексы которые тебе нужно вывести в данном случаем выводятся картинки у которых от 0 до 2;
всё о циклах
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы