Вывод на страницу из 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) и заработало! Спасибо большое за терпение

Новые блоги и статьи Все статьи Все блоги /
Мобильное приложение ColorStep pavlinmavlin 17.09.2026 Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#. Название изменил на ColorStep. Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .	Запрет дублирования строк в табличной части Maks 13.09.2026 Реализация из решения ниже выполнена на нетиповом справочнике "Нормы ТО" с табличной часть "Виды ТО", разработанного в КА2, со следующими реквизитами: - ВидТО (СправочникСсылка. ВидыТО); - ВидГСМ. . .	Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Jin X 06.09.2026 Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .	Программа опроса у.з. расходомера SLS-720F Argus19 02.09.2026 Программа опроса у. з. расходомера SLS-720F Программа опрашивает один раз в минуту три ультразвуковых расходомера SLS-720F через интерфейс RS-485 по протоколу Modbus RTU. Опрашиваются регистры. . .
Hyper-V: Компьютер должен поддерживать доверенный платформенный модуль 2.0. Maks 31.08.2026 При установке Windows 11 на виртуальную машину Hyper-V 2-го поколения вылезла такая ошибка: Решение: в параметрах виртуальной машины, в разделе "Безопасность" (Security) активировать флаг. . .	Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм anaschu 30.08.2026 Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .	Оттачиваю умение писать js программы. russiannick 30.08.2026 Проектом выходного дня стало написание Книги шифров Виженера. Итогом стала версия 200, синий туман. Синий туман назван так, потому что замораживает текст под собой. Нажатие синих кнопок управляют. . .	мат медиц модель 30. презентация проекта anaschu 27.08.2026 хоп хоп хоп хидахоп, а я кладую))

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

	Вывод на страницу из json и одновременный ввод и вывод 19.12.2018, 17:33. Показов 4683. Ответов 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