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

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

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

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

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

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

@sk1ngr0s · 22.12.2018, 11:00 **[ТС]**

Консоль в браузере. Вот такое у меня получилось:

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!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));
  var myCar = new Object();
myCar.make = 'Ford';
myCar.model = 'Mustang';
myCar.year = 1969;
let clientObj = JSON.parse(responseText);
for (let key in clientObj)
{
    let divWithInfo = document.createElement('div');
    divWithInfo.innerHTML = 'ключ - ' + key + ' значение - ' + clientObj[key];
    //divWithInfo.innerHTML='str' + xhr.responseText
    document.body.appendChild(divWithInfo);
}
 
    //alert(JSON.stringify(simple));
}
</script>
<script>
 
</script>
    <header><img src="img/logo.png" alt="real logo"></header>
    {{{body}}}
</body>
</html>

В консоли браузера выводит {"obj":"adsd"} .

@atanov · 22.12.2018, 11:42

sk1ngr0s, 52-я строка очепятка:

JavaScript
1
let clientObj = JSON.parse(xhr.responseText);

В консоле у Вас вывелся объект.

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

Да, но, к сожалению, это дело не меняет.

Полагаю возникает ошибка из-за того что просто вывод на страницу идёт раньше вывода в консоль. Я нажал на кнопку, выскочила ошибка и "paused in debugger". Я нажимаю типа дальше или что (resume script execution) и только после этого появляется запись в консоли.

Добавлено через 23 минуты
Всё! Вставил то что Вы написали в скобки, где console.log(xhr.responseText) и заработало! Спасибо большое за терпение

Новые блоги и статьи Все статьи Все блоги /
Про "Windows must die!" kumehtar 04.11.2026 Знаете, чет накатило. . . . Когда-то это было почти боевым кличем: мол, нормальный человек сидит на DOS, OS/ 2 или Linux, а вот это вот - Must Die. А теперь человек произносит «мастдай» с усмешкой - и. . .	Красочные поля с номером страницы svg+background-image russiannick 04.11.2026 Красочные поля с номером страницы не менее важны чем в эпоху бумажных книг. Посему спешу представить почтеннейшей публике этот важный инструмент который эти поля и формирует. В процессе разработки. . .	Вступаем в новую фазу генерации favicons, векторную. russiannick 02.11.2026 Теперь нет нужды скрывать что используется простой svg. Исходный код изображения помещаем в поле и жмем кнопку. Исходник преобразуется в вид корректный для помещения в favicon или в url(). Нажатие. . .	Генератор паролей (вариант №4) Maks 01.11.2026 После публикации 3-го варианта генератора паролей, разослал его своим коллегам (с целью оценки), в итоге были получены следующие рекомендации: 1. Вернуть возможность использования знаков \| 1 l I;. . .
Генератор паролей (вариант №3) Maks 30.10.2026 Финальная версия генератора паролей 1С. Доработка решения в этот раз коснулась только визуальной части, а именно, добавлен реквизит ДопПараметры (тип Булево), который скрывает/ отображает реквизиты:. . .	Магическое мышление и магия, современная наука не отличима от магии (говорит ИИ Джемени) zorxor 30.10.2026 Джемени, расскажи, пожалуйста, что такое магическое мышление, что такое магия, почему современная наука чем-то напоминает магию? Фраза «Любая достаточно развитая технология неотличима от магии». . .	За какое время ИИ может подобрать пароль по хешу (рассказывает Джемени ИИ) zorxor 30.10.2026 Расскажи, Джемени, если известен хэш МД5, например, за сколько ИИ сможет подобрать соответствующий пароль? Искусственный интеллект (ИИ) может подобрать простой или средний по сложности пароль по. . .	Кто убил Suno? Почему наше солнышко погасло? (диалог с ИИ Джемени) zorxor 30.10.2026 Как убивали Suno. Хронология. «Убийство» музыкальной нейросети Suno — это затяжной процесс, в котором технологический хайп стартапа разбился о жесткую реальность судебных исков от гигантов. . .

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

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

@sk1ngr0s 0 / 0 / 0 Регистрация: 07.05.2016 Сообщений: 24
	22.12.2018, 12:25 [ТС]
	Да, но, к сожалению, это дело не меняет. Полагаю возникает ошибка из-за того что просто вывод на страницу идёт раньше вывода в консоль. Я нажал на кнопку, выскочила ошибка и "paused in debugger". Я нажимаю типа дальше или что (resume script execution) и только после этого появляется запись в консоли. Добавлено через 23 минуты Всё! Вставил то что Вы написали в скобки, где console.log(xhr.responseText) и заработало! Спасибо большое за терпение 0