Получить список пользователей по url

@Nas589 · Регистрация: 30.07.2021

Студворк — интернет-сервис помощи студентам

Ваши коллеги разработчики реализовали систему, благодаря которой можно получать список пользователей по url: https://jsonplaceholder.typicode.com/users.

Вам необходимо получить всех пользователей с помощью fetch и добавить данные о имени каждого пользователь внутрь html-элемента с id равным “data-container”.

Для удобства необходимо добавить элемент span с текстом “Загрузка...” перед загрузкой пользователей, и спрятать этот элемент после загрузки данных о пользователях.

Шаблон для HTML-элемента пользователя выглядит следующим образом:

HTML5
1
<li><a href="#">Имя пользователя</a></li>

Примечание: обязательно не забывайте прописывать блоки catch. В них просто выводите ошибку в консоль при помощи console.error.

@amr-now · 27.08.2021, 13:40

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <button type="button" id="btn">Загрузить</button><br>
    <ul id="data-container"></ul>
    <script>
        /**
         * TAP-версия загрузки JSON по HTTP
         * @param {RequestInfo} url Строка URL или объект Request
         * @param {RequestInit | undefined} init Объект с опциями к запросу
         * @returns {Promise<any>} Обещание вернуть JSON-объект
         */
        async function fetchJSONAsync(url, init) {
            let response = await fetch(url, init);
            if (response.ok) {
                let json = await response.json();
                return json;
            }
            else
                throw new Error(`${response.status}: ${response.statusText}`);
        }
 
        document.getElementById("btn").onclick = btn_click;
        let span;
        let container = document.getElementById("data-container");
 
        // Асинхронная функция, являющаяся например обработчиком кнопки
        // или при событии загрузки страницы
        async function btn_click() {
            container.innerHTML = "";
            if (span)
                span.style.display = "";
            else {
                span = document.createElement("span");
                span.innerText = "Загрузка...";
                this.nextElementSibling.after(span);
            }
            try {
                let res = await fetchJSONAsync("https://jsonplaceholder.typicode.com/users");
                container.innerHTML = res
                    .map(e => `<li><a href="#">${e.username}</a></li>`)
                    .join("");
            } catch (error) {
                console.error(error.message);
            }
            finally {
                span.style.display = "none";
            }
        }
    </script>
</body>
</html>

@KovAlena · 18.11.2021, 23:29

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Promise + fetch</title>
  <link rel="stylesheet" href="task-1.css"></link>
</head>
<body>
  <h1>Promise + fetch</h1>
  <ol id="data-container">
    <span id="loader" hidden>Loading...</span>
  </ol>
  <script src="task-1.js"></script>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
:root {
    --text-shadow-color: rgba(255, 255, 255, 0.5);
    --link-background: #DAD2CA;
    --text-color: #444;
    --circle-background: #8FD4C1;
    --border-color: #ffffff;
}
 
body {
    padding: 20px;
}
 
#data-container {
    counter-reset: li; 
    list-style: none; 
    font: 14px "Trebuchet MS", "Lucida Sans";
    padding: 0;
    text-shadow: 0 1px 0 var(--text-shadow-color);
}
 
#data-container a {
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    margin: .5em 0;
    background: var(--link-background);
    color: var(--text-color);
    text-decoration: none;
    border-radius: .3em;
    transition: .3s ease-out;
}
 
#data-container a:hover {
    background: var(--link-background);
}
 
#data-container a:hover:before {
    transform: rotate(360deg);
}
 
#data-container a:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: var(--circle-background);
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid var(--border-color);
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
const URL = 'https://jsonplaceholder.typicode.com/users'; 
 
const original = document.querySelector('#data-container');
 
const result = fetch(URL, {
    method: 'GET'
});
 
function createUser(data){
    const {id, name, username, email} = data
    const user = document.createElement('div')
    user.classList.add('user');
        
  user.innerHTML = ` 
    <div class="user-id">${id}</div>
      <div class="user-info">
        <div class="subtitle"> Name:</div>
        <div class="title"> ${name}</div>
    </div>
 
    <div class="user-info">
        <div class="subtitle"> Username:</div>
        <div class="title">${username}</div>
    </div>
 
    <div class="user-info">
        <div class="subtitle"> Email:</div>
        <a href='#'> 
        <div class="title">${email}</div>
        </a>
    </div>
 
    <button class="info">More info</button>
`;
  
  return user
};
 
function insertUser(user){ 
    original.append(user)
};
 
function loading() {
    const loading = document.querySelector('[data-load="true"]');
  
    if (!Boolean(loading)) { 
    const loading = document.createElement('span');
    loading.textContent = 'Загрузка...';
    loading.setAttribute('data-load','true');
    original.insertAdjacentElement('afterbegin', loading);
    } else { 
    loading.setAttribute('hidden', '')
    }
 };
 
loading();
 
result 
    .then(response => {
    console.log(response)
    return response.json()
    })
    .then(response => {
    response.forEach(data => {
    const user = createUser(data)
    insertUser(user)
    })
    })
    .catch(error => {
    console.error(error)
    })
    .finally(response => {
    loading() 
    });

@amr-now · 19.11.2021, 06:03

KovAlena,

Сообщение от Nas589

Шаблон для HTML-элемента пользователя выглядит следующим образом:

HTML5
1
<li><a href="#">Имя пользователя</a></li>

Обработка ошибок не доделана. Сам по себе ответ сервера 404 скриптом не воспринимается, как ошибка.

Потерян бесхозный элемент <span id="loader" hidden>Loading...</span>

И всё равно буду настаивать, что не нужно применять старые методы .then и .catch
Они фактически создают иллюзию асинхронности в синхронном коде. По сути напоминают доисторическую асинхронность на callback-ах.

@KovAlena · 19.11.2021, 22:22

Ну и зря, потому что в контексте конкретного задания все работает как надо. Я сейчас прохожу данный курс и куратор принял задание без замечаний. А, как вы говорите, старые методы .then и .catch проходили по теме урока и поэтому именно они использовались при решении. Во время обучения полезно знать не только новое, но и помнить о старом. Надеюсь, вы не можете не согласться.

@gogolik · 21.11.2021, 17:43

Не по теме:

KovAlena, а почему вы вопросы задаёте на форуме, а не куратору?.. В чем смысл такого обучения тогда?

@Dreddd · 06.06.2022, 22:03

И в продолжении данного задания:
Вы молодец! Если вы дошли до этого задания, то вы умеете получать данные и отображать их в HTML. Сейчас же задача будет посложнее.

Вам необходимо создать функцию getUsersByIds(), которая будет принимать массив, состоящий из id пользователей. Вам нужно получить всех пользователей, у которых есть данные значения id. Используйте некоторый код из предыдущего задания и Promise.all() для решения поставленной задачи.

Добавьте данные об имени каждого пользователя внутрь html-элемента с id="data-container". Также для удобства необходимо добавить элемент <span> с текстом “Загрузка...” перед загрузкой пользователей, и спрятать этот элемент после загрузки данных о пользователях.

Шаблон для HTML-элемента пользователя выглядит следующим образом:
<li>
<a href="#">Имя пользователя</a>
</li>;

Для тестирования функции getUsersByIds() используйте данный код:
getUsersByIds([5, 6, 2, 1]);

Примечание: обязательно не забывайте прописывать блоки .catch() (или используйте конструкцию try...catch). В них просто выводите ошибку в консоль при помощи console.error().

Новые блоги и статьи Все статьи Все блоги /
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/
Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .

@KovAlena 3 / 3 / 0 Регистрация: 18.11.2021 Сообщений: 3
	19.11.2021, 22:22
	Ну и зря, потому что в контексте конкретного задания все работает как надо. Я сейчас прохожу данный курс и куратор принял задание без замечаний. А, как вы говорите, старые методы .then и .catch проходили по теме урока и поэтому именно они использовались при решении. Во время обучения полезно знать не только новое, но и помнить о старом. Надеюсь, вы не можете не согласться. 0

@gogolik
	21.11.2021, 17:43
	Не по теме: KovAlena, а почему вы вопросы задаёте на форуме, а не куратору?.. В чем смысл такого обучения тогда? 0

@Dreddd 0 / 0 / 0 Регистрация: 06.06.2022 Сообщений: 1
	06.06.2022, 22:03
	И в продолжении данного задания: Вы молодец! Если вы дошли до этого задания, то вы умеете получать данные и отображать их в HTML. Сейчас же задача будет посложнее. Вам необходимо создать функцию getUsersByIds(), которая будет принимать массив, состоящий из id пользователей. Вам нужно получить всех пользователей, у которых есть данные значения id. Используйте некоторый код из предыдущего задания и Promise.all() для решения поставленной задачи. Добавьте данные об имени каждого пользователя внутрь html-элемента с id="data-container". Также для удобства необходимо добавить элемент <span> с текстом “Загрузка...” перед загрузкой пользователей, и спрятать этот элемент после загрузки данных о пользователях. Шаблон для HTML-элемента пользователя выглядит следующим образом: <li> <a href="#">Имя пользователя</a> </li>; Для тестирования функции getUsersByIds() используйте данный код: getUsersByIds([5, 6, 2, 1]); Примечание: обязательно не забывайте прописывать блоки .catch() (или используйте конструкцию try...catch). В них просто выводите ошибку в консоль при помощи console.error(). 0

Получить список пользователей по url

Решение