Задать вопрос
dlinyj
@dlinyj
javascript

Как лучше конвертировать json в html таблицу и обратно в json?

Коллеги, у меня стоит задача сделать вывод json в виде таблицы, с возможностью отредактировать все параметры, свернуть обратно в json и передать в cgi. json достаточно объёмен, но для примера приведу под спойлером.
Пример исходного json
{
  "ParameterReader": {
    "AdressReader":	62,
    "StartMode":	0,
    "ConfigMode":	0,
    "CRC32":		0
  },
  "ParameterSensor": [
    {
      "A" :			0.000000000000,
      "B" :			0.000000000000,
      "C" :			0.000000000000,
      "Lvl_Static" :		50.000000000000,
      "Coeff_Lvl" :		1.200000000000,
      "Coeff_FilterT" :		0.500000000000,
      "Coeff_FilterS" :		0.500000000000,
      "Offset_Peak" :		0.000000000000,
      "COffset_Temperature" :	0.000000000000,
      "Window_FilterT":		6,
      "Window_FilterS":		6,
      "Index_StDdFFT":		10,
      "Index_SpDdFFT":		100,
      "Index_StFind":		0,
      "Index_SpFind":		1024,
      "Number_Cconfig":		2127,
      "Number_WorkMode":	0,
      "Reserv_1":		0,
      "Reserv_2":		0,
      "Reserv_3":		0,
      "Reserv_4":		0,
      "IDSensor":		1,
      "AD5932": [
      {
          "Creg":		0,
          "NI":			1277,
          "DFL":		24,
          "DFH":		0,
          "II":			0,
          "SFL":		24,
          "SFH":		884
          },
          {
          "Creg":		0,
          "NI":			0,
          "DFL":		0,
          "DFH":		0,
          "II":			0,
          "SFL":		0,
          "SFH":		0
          }
      ],
      "ADF4360": [
      {
          "CL":			0,
          "RCL":		0,
          "NCL":		0
          },
          {
          "CL":			0,
          "RCL":		0,
          "NCL":		0
          }
      ],
      "AD5932init": [
      {
          "Creg":		0,
          "NI":			100,
          "DFL":		24,
          "DFH":		0,
          "II":			0,
          "SFL":		24,
          "SFH":		884
          },
          {
          "Creg":		0,
          "NI":			0,
          "DFL":		0,
          "DFH":		0,
          "II":			0,
          "SFL":		0,
          "SFH":		0
          }
      ],
      "ADF4360init": [
      {
          "CL":			0,
          "RCL":		0,
          "NCL":		0
          },
          {
          "CL":			0,
          "RCL":		0,
          "NCL":		0
          }
      ]
    },
...
      ]
    }
  ]
}



Короче, массив из 12 таких вот параметров. Получается дикая табличка.

aknoqhco-mntf8qzxje9vufcvty.png

Стоит задача сделать вывод этого json в табличку, с возможностью редактирования и сворачивание обратно в json. Структуру ParametrReader я сделал достаточно просто
Пример html
<script language="JavaScript">
...
function pop_table() {
    if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
        var json_data = JSON.parse(xmlhttp.responseText);
	AdressReader.setAttribute('value', json_data.ParameterReader.AdressReader); // поменяли атрибут
	StartMode.setAttribute('value', json_data.ParameterReader.StartMode); // поменяли атрибут
	ConfigMode.setAttribute('value', json_data.ParameterReader.ConfigMode); // поменяли атрибут
	CRC32.setAttribute('value', json_data.ParameterReader.CRC32); // поменяли атрибут
    }
}
</script>
</head>
<body>
...
    <table border="1" cellpadding="0" cellspacing="0" id="tParameterReader" class="sheet0 gridlines">
        <col class="col0">
        <col class="col1">
        <tbody>
          <tr class="row0">
            <td class="column0 style10 s style13" colspan="2">ParameterReader</td>
          </tr>
          <tr class="row1">
            <td class="column0 style16 s">AdressReader</td>
            <td class="column1 style4 null"><input type="text" id="AdressReader" value="" /></td>
          </tr>
          <tr class="row2">
            <td class="column0 style16 s">StartMode</td>
            <td class="column1 style6 null"><input type="text" id="StartMode" value="" /></td>
          </tr>
          <tr class="row3">
            <td class="column0 style16 s">ConfigMode</td>
            <td class="column1 style6 null"><input type="text" id="ConfigMode" value="" /></td>
          </tr>
          <tr class="row4">
            <td class="column0 style25 s">CRC32</td>
            <td class="column1 style8 null"><input type="text" id="CRC32" value="" /></td>
          </tr>
        </tbody>
    </table>
...

Полная версия

А вот по части параметра ParameterSensor, там массив, и есть понимание что нужно таблицу генерировать динамически и динамически делать поля ввода и их id. Но как это лучше сделать - ума не приложу. Есть чёткое ощущение, что изобретаю велосипед. Подскажите куда копать. Спасибо!
  • Вопрос задан
  • 1121 просмотр
6 комментариев
Подписаться 1 Средний 6 комментариев
Пригласить эксперта
Ответы на вопрос 1
MDiMaI666
@MDiMaI666
Талантливый программист
Испоьзовать Vue, он в отличие от других подключается одним файлом как jquery.
Vue умеет в компоненты, поэтому это быдет выглядет как передача ему json а все остальное сделает сам.
Или сниппеты, например google: "bootstrap table snippet"
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Расшифровать требуемые параметры из CAN-шины авто Chery Tiggo 7 Pro
23 дек. 2024, в 00:27
20000 руб./за проект
Отправка команды на (раз)блокировку двигателя Chery Tiggo 7 Pro
23 дек. 2024, в 00:15
20000 руб./за проект
Собрать из исходного кода и запустить в докере рабочее приложение с бд
22 дек. 2024, в 22:57
500 руб./за проект
Ещё заказы