Вывод на страницу из json и одновременный ввод и вывод

@sk1ngr0s · Регистрация: 07.05.2016

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

Всем привет! Передо мной поставили задачу написать как бы гугл таблицы: как минимум возможность выгружать данные из базы данных в таблицу, заполнять, редактировать с сохранением в бд. У меня есть рабочий сервер на node.js и база данных postgres, то есть я могу вводить данные на странице и сохранять введённое в бд; выбирать данные и отправлять их. Проблема заключается в том, что я не знаю:
1) как отобразить на странице содержимое json, которое мне возвращает сервер?
2) как сделать так, чтобы в ячейку можно было одновременно вводить и выводить информацию?
Пример того, что хотелось бы иметь

Вывод на страницу из json и одновременный ввод и вывод

Может кто-нибудь сталкивался с таким, похожим или знает хотя бы в какую сторону смотреть, чтобы это сделать? Фреймворки там какие, библиотеки или ещё что - всё что угодно, лишь бы можно было разобраться и оно работало!

@atanov · 20.12.2018, 15:11

sk1ngr0s, Вы знакомы с js, хотя бы в общих чертах? А так для начала можно json в обычный объект распарсить и использовать.

@sk1ngr0s · 21.12.2018, 09:37 **[ТС]**

Конечно, пока я с js на Вы, но про преобразование из json в js знаю. Одна дальше этого не захожу

Пока я просто хочу вывести хоть что-то на страницу. Вот сервер:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
app.get('/simple', function (req, res) {
    res.render("simple") });
app.post('/simple', function(req, res){
    if (!req.body) return res.sendStatus(400);
   database.getClientsInfo(req.body.first_name, function(err, obj) {
      // res.redirect("output", {params: obj})
       console.log(obj[0].passport);
        if (err) {
          res.json({
                  'err': err
              })
          return;
        } 
       
        //   res.json({
        //       'obj': obj[0]
        //   })
        let resObj=obj[0]
         res.render('output', {resObj});
      })
 
 
})

База данных:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
module.exports.getClientsInfo = function(br,cb) {
    
    pool.connect((err, client, done) => {
        if (err) throw err
        client.query(' SELECT passport FROM clients WHERE last_name=$1', [br], (qerr, result) => {
            if (qerr) {cb(qerr, null); throw qerr;} 
            cb(null, result.rows);
            done();
        });
    })
}

Страница, на которую хочу вывести данные:

HTML5
1
2
3
4
<!--{{#each resObj}}
<p>{{resObj}}</p>
{{/each}}>-->
<!--<p>{{resObj}}</p>-->

Уходил вчера с работы, закомментировал и запустил. Оно каким-то волшебным образом вывело на страницу "-->". Сервер в консоли мне выводит значение, которое я хочу вывести на страницу.

@atanov · 21.12.2018, 09:43

sk1ngr0s, а как клиент поджидает ответ сервера? Самое элементарное - пользователь что-то шмякает, клиент запрашивает сервер, сервер что-то делает и отдаёт. Хотелось бы увидеть как у Вас это реализовывается.

@sk1ngr0s · 21.12.2018, 10:03 **[ТС]**

Пользователь заходит на страницу с формой для ввода и кнопкой:

HTML5
1
2
3
4
5
6
7
8
<form method="POST">
    <p><b>Имя:</b><br>
        <input type="text" name="first_name" size="40">
    </p>
    <p>
        <a href="output" title=""> <input type="button" value="Ввести данные" onclick="simpleId()"> </a>
    </p>
</form>

При нажатии на кнопку запускается штука, отправляющая данные на сервер:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
function simpleId() {
    var e = document.getElementsByName("first_name");
    simple.first_name = e[0].value;
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/simple', false);
    xhr.setRequestHeader("Content-type", "application/json");
 
    xhr.send(JSON.stringify(simple));
 
 
    //alert(JSON.stringify(simple));
}

Ну и всё, собственно. Кроме этого и того, что в сообщении выше, больше ничего нет. Всё работает: данные отправляются, извлекается из базы данных результат, выводится в консоль... только на страницу не выводится! >_<

@atanov · 21.12.2018, 10:25

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

только на страницу не выводится!

Правильно, потому-что клиент не ждёт ответа

Для начала надо ответ от сервера сделать - у Вас нода там? Выводите и дальше добавьте в код на клиенте:

JavaScript
1
2
3
4
5
6
7
8
xhr.onreadystatechange = statusReady;
function statusReady()
{
    if (xhr.readyState == 4)
   {
      console.log(xhr.responseText);
   }
}

И поправьте 4-ю строку - негоже синхронным делать

JavaScript
1
xhr.open('POST', '/simple', true);

В консоле увидите, что вернулось. Если пусто - то значит на сервере НЕ ВЫВЕЛОСЬ

@sk1ngr0s · 21.12.2018, 10:55 **[ТС]**

Извините, что-то я не очень понимаю. Мне ведь в консоль уже выводятся данные. В серверной части у меня есть строчка

JavaScript
1
console.log(obj[0].passport);

и она выводит искомое в консоль "adsd". А то, что вы напили, так должно выглядеть (туда я добавил или нет ^_^)

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
<script>
    var simple = {};
 
 
function simpleId() {
    
    var e = document.getElementsByName("first_name");
    simple.first_name = e[0].value;
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = statusReady;
function statusReady()
{
    if (xhr.readyState == 4)
   {
      console.log(xhr.responseText);
   }
}
    xhr.open('POST', '/simple', true);
    xhr.setRequestHeader("Content-type", "application/json");
 
    xhr.send(JSON.stringify(simple));
 
 
    //alert(JSON.stringify(simple));
}

@atanov · 21.12.2018, 10:58

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

В серверной части

Я имею ввиду клиентскую часть. Вы видите на сервере; попробуйте консоль на клиенте

@sk1ngr0s · 21.12.2018, 11:13 **[ТС]**

А на клиенте в консоли это где смотреть ^_^ ? Полагаю в браузере, но там ничего не пишет

@atanov · 21.12.2018, 11:20

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

Полагаю в браузере, но там ничего не пишет

Воооооооооот. Стало быть ничего Ваш сервер НЕ ВЫВЕЛ. На php вывод можно echo'м сделать (или print_r, var_dump etc.). На ноде забыл (или не помнил

, лет пять уже не писал).

@sk1ngr0s · 21.12.2018, 11:39 **[ТС]**

Хах, так в этом и проблема, что я не знаю как вывести на страницу, поэтому и спрашиваю это всё) Но на сервере ведь всё написано. То есть сейчас у меня ещё не отправляются данные с сервера на клиент, а потом уже будет стоять задача их отобразить, так?

@atanov · 21.12.2018, 11:59

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

То есть сейчас у меня ещё не отправляются данные с сервера на клиент

Не совсем - Вам нужно вывод сделать. а то, что вывелось на сервере, попадёт вот сюда: console.log(xhr.responseText); И Вы в консоле на клиенте это увидите.

@sk1ngr0s · 21.12.2018, 12:25 **[ТС]**

Всё, в консоль пишется то, что я отправляю с сервера на ту же страницу, с которой я и отправляю (у меня был после отправки переход на другую, поэтому не работало). Теперь вопрос как отобразить отправленное сервером на страницу (можно на эту, можно на другую, не важно - лишь бы отображало!).

@atanov · 21.12.2018, 12:36

sk1ngr0s, тогда не пихайте на сервере в консоль, а отправьте json на клиент. Кстати, что-то не наблюдаю response.json в Вашем посте 3.

@sk1ngr0s · 21.12.2018, 12:43 **[ТС]**

А разве одно другому мешает? Немного подправил:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
app.get('/simple', function (req, res) {
    res.render("simple") });
app.post('/simple', function(req, res){
    if (!req.body) return res.sendStatus(400);
   database.getClientsInfo(req.body.first_name, function(err, obj) {
      // res.redirect("output", {params: obj})
       console.log(obj[0].passport);
        if (err) {
          res.json({
                  'err': err
              })
          return;
        } 
       
           res.json({
               'obj': obj[0].passport
           })

Консоль браузера мне пишет: "{"obj":"adsd"}", то есть всё хорошо. А как мне сделать так, чтобы этот obj был виден не в консоли браузера, а на странице?

@atanov · 21.12.2018, 12:53

sk1ngr0s, так распарсите его да и пихайте в DOM.

JavaScript
1
2
3
4
5
6
let clientObj = JSON.parse(xhr.responseText);
//перебираете объект
for (let key in clientObj)
{
...действия
}

Что из себя представляет собой страница? В том смысле - на ней какой-то html код есть?

@sk1ngr0s · 21.12.2018, 13:05 **[ТС]**

Страница состоит как бы из двух частей. Вот первая (извините, не убрано на ней)

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
56
<!doctype html>
<html>
<head>
    <title>real</title>
</head>
<body>
   <script>var client = {};
 
 
function clientId() {
    var e = document.getElementsByName("first_name");
    client.first_name = e[0].value;
    e = document.getElementsByName("last_name");
    client.last_name = e[0].value;
    e = document.getElementsByName("passport");
    client.passport = e[0].value;
 
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/signup', false);
    xhr.setRequestHeader("Content-type", "application/json");
 
    xhr.send(JSON.stringify(client));
 
 
    alert(JSON.stringify(client));
}</script>
<script>
    var simple = {};
 
 
function simpleId() {
    
    var e = document.getElementsByName("first_name");
    simple.first_name = e[0].value;
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = statusReady;
function statusReady()
{
    if (xhr.readyState == 4)
   {
      console.log(xhr.responseText);
   }
}
    xhr.open('POST', '/simple', true);
    xhr.setRequestHeader("Content-type", "application/json");
 
    xhr.send(JSON.stringify(simple));
 
 
    //alert(JSON.stringify(simple));
}
</script>
    <header><img src="img/logo.png" alt="real logo"></header>
    {{{body}}}
</body>
</html>

Внутрь body этой страницы передаётся такое

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<form method="POST">
    <p><b>Имя:</b><br>
        <input type="text" name="first_name" size="40">
    </p>
    <p>
        <a href="#" title=""> <input type="button" value="Ввести данные" onclick="simpleId()"> </a>
    </p>
</form>
{{#each obj}}
<p>{{obj}}</p>
{{/each}}dsdsf
<p>{{obj}}</p>
<h2>Make a table based on JSON data.</h2>

То есть с какой страницы отправляю, на ту и приходит json от сервера (на другую не приходит, но мне без разницы на какой, лишь бы выводило). То что Вы написали это где делать надо и что оно даст? Будет переменная js, а как её в html поставить?

@atanov · 21.12.2018, 13:34

sk1ngr0s, например так:

JavaScript
1
2
3
4
5
6
7
let clientObj = JSON.parse(xhr.responseText);
for (let key in clientObj)
{
    let divWithInfo = document.createElement('div');
    divWithInfo.innerHTML = 'ключ - ' + key + ' значение - ' + clientObj[key];
    document.appendChild(divWithInfo);
}

@sk1ngr0s · 22.12.2018, 10:06 **[ТС]**

Спасибо, конечно, но эта вставлялка работает, если я добавляю свой объект. А так - нет. Пишет: "syntaxerror unexpected end of json input". Посмотрел, что такое выдаёт в случае пустого json. Но как он может быть пустым, если в консоль всё корректно выводится?

@atanov · 22.12.2018, 10:42

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

Но как он может быть пустым, если в консоль всё корректно выводится?

Еще раз - консоль сервера или клиента? Если движок ругается на

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

syntaxerror unexpected end of json input

то, очевидно, на клиент ничего не приходит.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@sk1ngr0s 0 / 0 / 0 Регистрация: 07.05.2016 Сообщений: 24

	Вывод на страницу из json и одновременный ввод и вывод 19.12.2018, 17:33. Показов 4407. Ответов 22 Метки framework, html (Все метки) Всем привет! Передо мной поставили задачу написать как бы гугл таблицы: как минимум возможность выгружать данные из базы данных в таблицу, заполнять, редактировать с сохранением в бд. У меня есть рабочий сервер на node.js и база данных postgres, то есть я могу вводить данные на странице и сохранять введённое в бд; выбирать данные и отправлять их. Проблема заключается в том, что я не знаю: 1) как отобразить на странице содержимое json, которое мне возвращает сервер? 2) как сделать так, чтобы в ячейку можно было одновременно вводить и выводить информацию? Пример того, что хотелось бы иметь Может кто-нибудь сталкивался с таким, похожим или знает хотя бы в какую сторону смотреть, чтобы это сделать? Фреймворки там какие, библиотеки или ещё что - всё что угодно, лишь бы можно было разобраться и оно работало! 0

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	20.12.2018, 15:11
	sk1ngr0s, Вы знакомы с js, хотя бы в общих чертах? А так для начала можно json в обычный объект распарсить и использовать. 0

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	21.12.2018, 09:43
	sk1ngr0s, а как клиент поджидает ответ сервера? Самое элементарное - пользователь что-то шмякает, клиент запрашивает сервер, сервер что-то делает и отдаёт. Хотелось бы увидеть как у Вас это реализовывается. 0

@sk1ngr0s 0 / 0 / 0 Регистрация: 07.05.2016 Сообщений: 24
	21.12.2018, 11:13 [ТС]
	А на клиенте в консоли это где смотреть ^_^ ? Полагаю в браузере, но там ничего не пишет 0

@sk1ngr0s 0 / 0 / 0 Регистрация: 07.05.2016 Сообщений: 24
	21.12.2018, 11:39 [ТС]
	Хах, так в этом и проблема, что я не знаю как вывести на страницу, поэтому и спрашиваю это всё) Но на сервере ведь всё написано. То есть сейчас у меня ещё не отправляются данные с сервера на клиент, а потом уже будет стоять задача их отобразить, так? 0

@sk1ngr0s 0 / 0 / 0 Регистрация: 07.05.2016 Сообщений: 24
	21.12.2018, 12:25 [ТС]
	Всё, в консоль пишется то, что я отправляю с сервера на ту же страницу, с которой я и отправляю (у меня был после отправки переход на другую, поэтому не работало). Теперь вопрос как отобразить отправленное сервером на страницу (можно на эту, можно на другую, не важно - лишь бы отображало!). 0

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	21.12.2018, 12:36
	sk1ngr0s, тогда не пихайте на сервере в консоль, а отправьте json на клиент. Кстати, что-то не наблюдаю response.json в Вашем посте 3. 0

@sk1ngr0s 0 / 0 / 0 Регистрация: 07.05.2016 Сообщений: 24
	22.12.2018, 10:06 [ТС]
	Спасибо, конечно, но эта вставлялка работает, если я добавляю свой объект. А так - нет. Пишет: "syntaxerror unexpected end of json input". Посмотрел, что такое выдаёт в случае пустого json. Но как он может быть пустым, если в консоль всё корректно выводится? 0