Как обновить DOM с помощью метода выборки JavaScript для фильтрации пользовательских данных из API?
Я хочу получить данные из API и отобразить их на странице HTML с помощью функции выборки JavaScript. Коды JavaScript подробно описаны ниже. Я могу прочитать console.info пользовательских данных из API. Однако на HTML-странице ничего не отображается должным образом.
<script>
fetch('https://dummyjson.com/user')
.then(response => response.json())
.then(data => console.info(data));
</script>
Я не могу понять, чего не хватает.
Я добавил функцию цикла для получения и фильтрации данных API и вставки результата в тег HTML, как описано ниже:
<script>
fetch('https://dummyjson.com/user')
.then(result => {
return result.json();
})
.then(data => console.info(data))
.then(data => {
data.forEach(user => {
const show = `<p>${user.firstName}</p>`;
let html = document.querySelector('item');
html.insertAdjacentHTML('after begin', show);
});
});
</script>
Ожидаемым результатом должны были быть имена (firstName) всех пользователей.
Когда код выполняется, выходные данные не отображают ожидаемый результат на странице HTML. Журнал консоли не показывает никаких ошибок. Просто пустая страница.
Полный код ниже:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<style>
body {
background: transparent;
color: #2c0493;
padding: 44px;
margin: 0;
height: 100vh;
align-items: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
h3,
h2 {
margin: 0;
}
</style>
</head>
<body>
<h2 id = "header">GET Data from API</h2>
<h3>And display in HTML with JavaScript</h3>
<hr />
<div id = "item"></div>
<script>
fetch('https://dummyjson.com/user')
.then(result => {
return result.json()
})
.then(data => console.info(data))
.then(data => {
data.forEach(user => {
const show = `<p>${user.firstName}</p>`
let html = document.querySelector('item')
html.insertAdjacentHTML('afterbegin', show)
});
});
</script>
</body>
</html>
Больше скриншотов здесь:
Ожидаемый результат:
@JaromandaX - Да, спасибо, что указали на это. Изначально я использовал «после начала» с пробелом. Однако я заметил и исправил это, пытаясь проверить и отладить свой код. Я обновил код со всеми рекомендациями. За два месяца я многому научился. Высоко оценен.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Согласно документации querySelector():
Метод querySelector() документа возвращает первый элемент внутри документ, соответствующий указанному селектору CSS или группе CSS селекторы. Если совпадений не найдено, возвращается ноль. Цитата
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
Вы можете использовать getElementById() для достижения желаемого результата с помощью чего-то вроде
let html = document.getElementById("item");
html.innerHTML = "<p>whatever you want<p>"
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
Помимо четырех других ошибок в коде ОП, которые вы не устранили, ваш код будет отображать только последний элемент цикла forEach.
@PekosoG - Да, getElementById предпочтительнее.
Вы выполняете array foreach, но не в правильном массиве.
должно быть что-то вроде:
fetch('https://dummyjson.com/user')
.then(result => {
return result.json()
})
.then(data => console.info(data))
.then(data => {
data.users.forEach(user => {
const show = `<p>${user.firstName}</p>`
let html = document.querySelector('item')
html.insertAdjacentHTML('afterbegin', show)
});
});
Вы не смогли решить как минимум три другие проблемы в коде ОП... главная из них - каким будет результат .then(data => console.info(data)) :p
Во-первых, давайте решим проблемы в вашем коде.
.then(data => console.info(data))означает, что следующий.thenполучаетundefinedв качестве аргументаdata— это не массив, это массивdata.users- при получении
idв.querySelector, поскольку это синтаксис CSS, вам нужен#в селекторе, например#item - в
.insertAdjacentHTMLпервый аргумент - один изbeforebegin|afterbegin|beforeend|afterend... в этом значении нет пробела
Следует отметить одну вещь: поскольку вы используете .afterbegin, список будет отображаться в порядке, обратном полученным вами данным — возможно, это и было вашим намерением, если нет, вы бы использовали beforeend в .insertAdjacentHTML
Исправляем ваш код, чтобы он работал:
fetch('https://dummyjson.com/user')
.then(result => result.json())
.then(data => {
console.info(data);
return data;
}) // 1. keep the data flowing in the chain
.then(data => {
data.users.forEach(user => { // 2. data.users is the array you are after
const show = `<p>${user.firstName}</p>`;
let html = document.querySelector('#item'); // 3. note the `#`
html.insertAdjacentHTML('afterbegin', show); // 4. no space in afterbegin
// note, this will display users in reverse order w.r.t. data.users
});
})<p id = "item"></p>Давайте сделаем современную версию, обратите внимание, что функция async не понадобится в <script type = "module">, поскольку это позволяет ожидать верхнего уровня.
async function getData() {
const target = document.querySelector('#item');
const result = await fetch('https://dummyjson.com/user');
const data = await result.json();
console.info(data);
// remove the this .reverse() below if you didn't mean to reverse the order
const html = data.users.reverse().map(({firstName}) =>`<p>${firstName}</p>`).join("");
target.insertAdjacentHTML('afterbegin', html);
}
getData();<p id = "item"></p>Код обновлен. Теперь работает отлично, как и ожидалось. Я изменил querySelector на: getElementsById. Я вижу случай: в этом случае нужно выбрать один элемент. Также буду читать о функции Async.
Кажется, никто не указал, что это не
html.insertAdjacentHTML('after begin', show);этоhtml.insertAdjacentHTML('afterbegin', show);