Форум программистов, компьютерный форум, киберфорум
REST API
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.78/9: Рейтинг темы: голосов - 9, средняя оценка - 4.78
3 / 3 / 1
Регистрация: 09.04.2017
Сообщений: 290

Как отобразить данные с Rest API сервера на html странице

13.07.2021, 14:39. Показов 1936. Ответов 2

Студворк — интернет-сервис помощи студентам
Мне нужно отобразить инфо-карточки, вытаскивая данные с одного сервера, сохранить их на своем и вывести их на страницу.
Я создала сервер и HTML страницу, прописала взятие денных, добавление елементов на страницу, но не могу понять чего не хватает, чтобы карточки добавлялись в DOM.

server
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
const express = require('express');
const path = require('path');
const app = express();
const server = require('http').Server(app);
const fetch = require("node-fetch");
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
 
const url = 'https://reqres.in/api/users';
 
 
global.document = new JSDOM(this.html).window.document;
 
async function getCards() {
    let response = await fetch(url);
    let cards = await response.json();
    let cardsList;
 
    document.addEventListener("DOMContentLoaded", function(event) { 
        cardsList = document.querySelector('.cards-list');
 
        for (key in cards) {
            cardsList.innerHTML += `
                <div class="card w-75">
                    <img src="${content[key].avatar}" class="card-img-top" alt="...">
                    <div class="card-body">
                        <p class="email">${content[key].email}</p>
                        <p class="first-name">${content[key].first-name}</p>
                        <p class="last-name">${content[key].last-name}</p>
                    </div>
                </div>
            `
        }
    });
}
 
app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'index.html'))
});
 
server.listen(3000, (err) =>{
    if(err){
        throw Error(err);
    }
    console.log('Server is runnig');
});
HTML страница
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Business Cards</title>
</head>
<body>
    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
          <span class="navbar-brand mb-0 h1">Business Cards</span>
        </div>
    </nav>
    
    <div class="cards-list">
        <!-- тут должны быть карточки-->
    </div>
</body>
</html>
Подскажите, пожалуйста, что нужно сделать.
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
13.07.2021, 14:39
Ответы с готовыми решениями:

Drupal 8 - REST API. Как реализовать ответ в формате JSON на главной странице?
Добрый день! Начинаю разбираться с друпалом и прочим. Встала задача сделать вывод сущностей в формате JSON. Разобрался как через админку...

Как получить данные из REST API
Доброго времени, имеется следующий код: var app = angular.module(&quot;springDemo&quot;, ); app.controller(&quot;AppCtrl&quot;, function...

Как отобразить ответ сервера на странице
после отправки данных серверу он возвращает данные такой функцией echo $_POST, ' отправлено ', date(&quot;j.n.Y, G:i:s&quot;, $time),...

2
331 / 238 / 80
Регистрация: 15.11.2017
Сообщений: 453
Записей в блоге: 4
14.07.2021, 18:51
А почему вы не хотите по-обычному на фронтенде фетчить API и вставлять в обычный DOM?
0
124 / 44 / 15
Регистрация: 01.11.2020
Сообщений: 122
15.07.2021, 07:48
с движком представлений ejs

server
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
const express = require('express');
const app = express();
const fetch = require("node-fetch");
 
 
const url = 'https://reqres.in/api/users';
 
// View engine setup
app.set('view engine', 'ejs');
 
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}`);
}
 
app.get('/', async function (req, res) {
    let cards = [];
    try {
        cards = (await fetchJSONAsync(url)).data;
 
    } catch (error) {
        console.error(error.message);
    }
 
    res.render('index', {
        cards: cards
    });
});
 
app.listen(3000, (err) =>{
    if(err){
        throw Error(err);
    }
    console.log('Server is runnig');
});
index.ejs
HTML5
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
<!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">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Business Cards</title>
</head>
<body>
    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
          <span class="navbar-brand mb-0 h1">Business Cards</span>
        </div>
    </nav>
    
    <div class="cards-list">
        <!-- тут должны быть карточки-->
        <% cards.forEach(function(dat) { %>      
            <div class="card w-75">
                <img src="<%= dat.avatar%>" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="email"><%= dat.email%></p>
                    <p class="first-name"><%= dat.first_name%></p>
                    <p class="last-name"><%= dat.last_name%></p>
                </div>
            </div>
        <% }); %>
    </div>
</body>
</html>
2
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
15.07.2021, 07:48
Помогаю со студенческими работами здесь

Как получить данные из выделенной области xlsx файла, используя rest api?
Добрый день. Встала передо мной задача - предоставить возможность пользователю загрузить на нашем сайте файл xlsx, а затем получить данные...

как отобразить Bitmap на HTML странице не используя временой файл?
Я создал объект типа Bitmap, используя MemoryStream (просто прочитал изображение из базы данных и потом этот массив байт записал в...

Как сделать выборку из MySql и отобразить эти данные на странице?
У меня есть такая таблица mysql_query(&quot;CREATE TABLE `building_$counry_first` (`villid` BIGINT NOT NULL, `building` TEXT NOT NULL, `wood`...

На localhost клиент не получает данные от rest api
Добрый день. Есть клиент на php + codeigniter и и rest api. Захостил их оба на localhost, но клиент не может получить данные с api. При...

Где можно получить тестовые данные REST API?
Доброго дня. Где можно попрактиковаться с REST API (retrofit, gson)? То что удалось нагуглить предлагает по сути работу в одну сторону -...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Символические и жёсткие ссылки в Linux.
algri14 15.03.2026
Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это дополнительная запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая. . .
[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора
ФедосеевПавел 14.03.2026
Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
делаю науч статью по влиянию грибов на сукцессию
anaschu 13.03.2026
прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++
8Observer8 10.03.2026
Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE
8Observer8 10.03.2026
Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки
Neotwalker 08.03.2026
Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages
DevAlt 07.03.2026
Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F#
DevAlt 06.03.2026
В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru