Блог

Главная - Вопросы по программированию - Как отображать / отображать данные из извлеченного api с помощью асинхронного ожидания

Как отображать / отображать данные из извлеченного api с помощью асинхронного ожидания

#javascript #async-await #es6-promise

Вопрос:

У меня есть одна функция, в которой я получаю данные из API и анализирую их в json.

Во второй функции я пытаюсь вставить данные в элемент DOM.

В чем проблема, пожалуйста, и как мы правильно передаем эти данные?

Функция Firt:

 // GET PUBLIC IP const getIp = async () =gt; {   const reqIp = await fetch("https://ipinfo.io/json?token=xxx")  return reqIp.json()  }

Вторая функция:

 document.addEventListener("DOMContentLoaded", async () =gt; {  const dataIp = await getIp()  let ipAdress = document.querySelectorAll('.ip p')  ipAdress.innerHTML = dataIp.ip })  getIp()

дом:

 lt;div class="ip"gt;  lt;h5gt;Your IP Adress:lt;/h5gt;  lt;pgt;lt;/pgt; lt;/divgt;

Маркер в порядке, данные правильно отображаются в консоли.

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

1. Попробуй querySelector вместо querySelectorAll этого . querySelectorAll возвращает список узлов, который вы не можете использовать . innerHTML querySelector возвращает один узел.

2. querySelectorAll возвращает список узлов

Ответ №1:

О, слишком много редбулла и слишком мало сна.

Большое вам спасибо, ребята.

Как они писали в комментариях, проблема была в селекторе.

 document.addEventListener("DOMContentLoaded", async () =gt; {  const dataIp = await getIp()  let ipAdress = document.querySelector('.ip p')  ipAdress.innerHTML = dataIp.ip })  getIp()

Вот как это работает без проблем

Метки: