Блог

Главная - Вопросы по программированию - JS, fetch() с помощью forEach

JS, fetch() с помощью forEach

#javascript #json

#язык JavaScript #json

Вопрос:

Чтобы добавить в мой index.js файл, который мне дали: const imgUrl = "https://dog.ceo/api/breeds/image/random/4"

Это сочетается со следующим html-кодом в моем index.html:

 lt;html lang="en" dir="ltr"gt;  lt;headgt;  lt;meta charset="utf-8"gt;  lt;titlegt;Intro to AJAX Practice Taskslt;/titlegt;  lt;script src="src/index.js" charset="utf-8"gt;lt;/scriptgt;  lt;/headgt;  lt;bodygt;  lt;h1gt;Dog CEOlt;/h1gt;   lt;div id="dog-image-container"gt;  lt;!-- images here --gt;  lt;/divgt;   lt;hrgt;  lt;label for="select-breed"gt;Filter Breeds That Start with:lt;/labelgt;  lt;select id="breed-dropdown" name="select-breed"gt;  lt;option value="a"gt;alt;/optiongt;  lt;option value="b"gt;blt;/optiongt;  lt;option value="c"gt;clt;/optiongt;  lt;option value="d"gt;dlt;/optiongt;  lt;/selectgt;   lt;ul id="dog-breeds"gt;   lt;/ulgt;   lt;/bodygt; lt;/htmlgt;

Мои требования:

  1. при загрузке страницы извлекает изображения, используя URL-адрес выше
  2. анализирует ответ в формате JSON
  3. добавляет элементы изображения в DOM для каждого изображения в массиве

Моя неудачная попытка привела меня сюда:

 document.addEventListener('DOMContentLoaded', {  const imgUrl = "https://dog.ceo/api/breeds/image/random/4"  const imgElement = document.createElement('img')  const div = document.getElementById('div')  return fetch(imgUrl)  .then(res =gt; res.json())  .then (.forEach(img) =gt; {  imgElement.appendChild(div)  }) })

Я знаю, что многое делаю неправильно. Я не могу понять, как добавить к своему элементу с помощью .forEach. Мы ценим любой вклад. Я учусь на шестой день и изо всех сил стараюсь.

Комментарии:

1. .then (.forEach(img) =gt; { imgElement.appendChild(div) }) -gt; .then(result =gt; result.forEach(img) =gt; { imgElement.appendChild(div) })

2. Спасибо за ваш ответ. Код не извлекает изображения, есть идеи, почему?

Ответ №1:

 const imgUrl = "https://dog.ceo/api/breeds/image/random/4" document.addEventListener('DOMContentLoaded', () =gt; {  const div = document.getElementById('dog-image-container');  fetch(imgUrl)  .then(res =gt; res.json())  .then(res =gt; {  res.message.forEach((imgSrc) =gt; {  const img = document.createElement('img');  img.src = imgSrc;  div.appendChild(img);  })  }); }); 
 lt;div id="dog-image-container"gt;  lt;!-- images here --gt;  lt;/divgt;

Комментарии:

1. Вероятно, это то, что искал спрашивающий.

2. Вау. Большое спасибо. меня смущает res.message.forEach все остальное, я думаю, что понимаю. Еще раз спасибо.

3. если вы откроете ссылку для получения 4 случайных изображений, вы увидите, что она возвращает объект JSON со следующей структурой {messages: string[], status: boolean}

4. хорошо. итак, результатом является объект, и я могу вникнуть в него с помощью .message, потому что «сообщение» — это ключ внутри массива. имею ли я на это право? если бы, например, ключом был «попкорн», я мог бы res.popcorn.foreach это сделать, правильно ли я это сделал?

5. да, вы все поняли правильно, за исключением одной вещи. «сообщение» — это ключ внутри объекта, а не внутри массива.

Метки: ,