Вставить значения из JSON в таблицу?

HTML JavaScript

1 ответ

Я пытаюсь вставить из JSON-объекта "УДЕРЖАНО" значения в таблицу, но ничего не помогает. Очень многое перепробовал, но я уже просто не знаю, как это сделать, не меняя структуру таблицы. Сам код:

document.addEventListener('DOMContentLoaded', function() {     var responseData = [         {             "ШАПКА": [             {                 "ТабНомер": "20511",                 "Сотрудник": "Димаков Андрей Владиславович",                 "Заголовок": "Ноябрь 2023",                 "ОбщийОблагаемыйДоход": 236899.94,                 "Должность": "техник ИВЦ ",                 "Подразделение": "отдел 23. Группа проектирования и сопровождения информационных систем",                 "Организация": "АО "ПО "СЕВЕР"",                 "КВыплате": 14297.23             }]         },         {             "НАЧИСЛЕНО": [             {                 "ВидНачисления": "Оклад по чаcам",                 "ПериодНачисления": "Ноябрь 2023",                 "ОтработанныеДни": 16,                 "ОтработанныеЧасы": 127.2,                 "ОплаченныеДни": 0,                 "ОплаченныеЧасы": 127.2,                 "СуммаНачисления": 14150.24             },             {                 "ВидНачисления": "Оплата отпуска по календарным дням",                 "ПериодНачисления": "Ноябрь 2023",                 "ОтработанныеДни": 0,                 "ОтработанныеЧасы": 0,                 "ОплаченныеДни": 5,                 "ОплаченныеЧасы": 0,                 "СуммаНачисления": 3398.9             },             {                 "ВидНачисления": "ИСН",                 "ПериодНачисления": "Ноябрь 2023",                 "ОтработанныеДни": 0,                 "ОтработанныеЧасы": 0,                 "ОплаченныеДни": 0,                 "ОплаченныеЧасы": 127.2,                 "СуммаНачисления": 6846.89             },             {                 "ВидНачисления": "Индексирующая выплата",                 "ПериодНачисления": "Ноябрь 2023",                 "ОтработанныеДни": 0,                 "ОтработанныеЧасы": 0,                 "ОплаченныеДни": 0,                 "ОплаченныеЧасы": 127.2,                 "СуммаНачисления": 1443.17             },             {                 "ВидНачисления": "Районный коэффициент",                 "ПериодНачисления": "Ноябрь 2023",                 "ОтработанныеДни": 0,                 "ОтработанныеЧасы": 0,                 "ОплаченныеДни": 0,                 "ОплаченныеЧасы": 0,                 "СуммаНачисления": 5610.08,                 "ВсегоНачислено": 31449.28             }]         },         {             "УДЕРЖАНО": [             {                 "ВидУдержания": "НДФЛ исчисленный",                 "ПериодУдержания": null,                 "СуммаУдержания": 4088             },             {                 "ВидУдержания": null,                 "ПериодУдержания": null,                 "СуммаУдержания": null             },             {                 "ВидУдержания": null,                 "ПериодУдержания": null,                 "СуммаУдержания": null             },             {                 "ВидУдержания": null,                 "ПериодУдержания": null,                 "СуммаУдержания": null             },             {                 "ВидУдержания": null,                 "ПериодУдержания": null,                 "СуммаУдержания": null             },             {                 "ВсегоУдержано": 4088             }]         },         {             "ВЫПЛАЧЕНО": [             {                 "ВидВыплаты": "Отпускные (перечислено в банк)",                 "ПериодВыплаты": "09.11.2023",                 "СуммаВыплаты": 2956.9             },             {                 "ВидВыплаты": "Зарплата (перечислено в банк)",                 "ПериодВыплаты": "10.11.2023",                 "СуммаВыплаты": 20066.91             },             {                 "ВидВыплаты": "Аванс (перечислено в банк)",                 "ПериодВыплаты": "24.11.2023",                 "СуммаВыплаты": 10107.15             },             {                 "ВсегоВыплачено": 33130.96             }]         },         {             "ПОДВАЛ": [             {                 "СуммаДолгНаКонецПериода": 14297.23,                 "СуммаДолгНаНачалоПериода": 20066.91             }]         }     ];         var container = document.getElementById('otvet');         container.innerHTML = `          &lt;table class="tg"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td class="tg-jxgv" colspan="8" style="border-style: none;"&gt; &lt;/td&gt; &lt;td class="tg-jxgv" colspan="7" style="border-style: none;"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="tg-oqqy" rowspan="2"&gt;Вид&lt;/td&gt; &lt;td class="tg-s9fd" colspan="2" rowspan="2"&gt;Период&lt;/td&gt; &lt;td class="tg-s9fd" colspan="2"&gt;Отработано&lt;/td&gt; &lt;td class="tg-s9fd" colspan="2"&gt;Оплачено&lt;/td&gt; &lt;td class="tg-s9fd" rowspan="2"&gt;Сумма&lt;/td&gt; &lt;td class="tg-oqqy" colspan="3" rowspan="2"&gt;Вид&lt;/td&gt; &lt;td class="tg-s9fd" colspan="2" rowspan="2"&gt;Период&lt;/td&gt; &lt;td class="tg-s9fd" colspan="2" rowspan="2"&gt;Сумма&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="tg-s9fd"&gt;Дни&lt;/td&gt; &lt;td class="tg-s9fd"&gt;Часы&lt;/td&gt; &lt;td class="tg-s9fd"&gt;Дни&lt;/td&gt; &lt;td class="tg-s9fd"&gt;Часы&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="tg-pdeq" colspan="8"&gt;1.Начислено&lt;/td&gt; &lt;td class="tg-pdeq" colspan="7"&gt;2. Удержано&lt;/td&gt; &lt;/tr&gt; &lt;!-- Чисто по циклу пройтись. &lt;b&gt;Вот на это стоит обратить внимание &lt;/b&gt;--&gt; ${responseData.map(dataBlock =&gt; {     const начислено = dataBlock["НАЧИСЛЕНО"] || [];     const удержано = dataBlock["УДЕРЖАНО"] || [];      if (начислено.length &gt; 0 || удержано.length &gt; 0) {         return начислено.map(item =&gt; {             const видНачисления = item["ВидНачисления"] || "";             const периодНачисления = item["ПериодНачисления"] || "";             const отработанныеДни = item["ОтработанныеДни"] || "";             const отработанныеЧасы = item["ОтработанныеЧасы"] || "";             const оплаченныеДни = item["ОплаченныеДни"] || "";             const оплаченныеЧасы = item["ОплаченныеЧасы"] || "";             const суммаНачисления = item["СуммаНачисления"] || "";                      // Поиск соответствующего удержания по Виду начисления             const удержание = удержано.find(u =&gt; u["ВидУдержания"] !== null &amp;&amp; u["ВидУдержания"] !== undefined);                          const видУдержания = удержание ? удержание["ВидУдержания"] || "" : "";             const периодУдержания = удержание ? удержание["ПериодУдержания"] || "" : "";             const суммаУдержания = удержание ? удержание["СуммаУдержания"] || "" : "";                          console.log("удержание:", удержание);             console.log("видУдержания:", видУдержания);             console.log("периодУдержания:", периодУдержания);             console.log("суммаУдержания:", суммаУдержания);              if (удержание) {                 видУдержания = удержание["ВидУдержания"] || "";                 периодУдержания = удержание["ПериодУдержания"] || "";                 суммаУдержания = удержание["СуммаУдержания"] || "";             }                      return `                 &lt;tr&gt;                     &lt;td class="tg-jxgv"&gt;${видНачисления}&lt;/td&gt;                     &lt;td class="tg-l38m" colspan="2"&gt;${периодНачисления}&lt;/td&gt;                     &lt;td class="tg-l38m"&gt;${отработанныеДни}&lt;/td&gt;                     &lt;td class="tg-l38m"&gt;${отработанныеЧасы}&lt;/td&gt;                     &lt;td class="tg-l38m"&gt;${оплаченныеДни}&lt;/td&gt;                     &lt;td class="tg-l38m"&gt;${оплаченныеЧасы}&lt;/td&gt;                     &lt;td class="tg-l38m"&gt;${суммаНачисления}&lt;/td&gt;                              &lt;td class="tg-jxgv" colspan="3"&gt;${видУдержания}&lt;/td&gt;                     &lt;td class="tg-jxgv" colspan="2"&gt;${периодУдержания}&lt;/td&gt;                     &lt;td class="tg-l38m" colspan="2"&gt;${суммаУдержания}&lt;/td&gt;                 &lt;/tr&gt;`;         }).join('');     } else {         return '';     } }).join('')} &lt;!-- Конец цикла --&gt; &lt;td class="tg-jxgv" colspan="7"&gt;Всего начислено&lt;/td&gt; &lt;td class="tg-l38m"&gt;31 449,28&lt;/td&gt; &lt;td class="tg-jxgv" colspan="5"&gt;Всего удержано&lt;/td&gt; &lt;td class="tg-l38m" colspan="2"&gt;4 088,00&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="tg-pdeq"&gt;3.&amp;nbsp;&amp;nbsp;&amp;nbsp;Доходы в натуральной форме&lt;/td&gt; &lt;td class="tg-pdeq" colspan="2"&gt;&lt;/td&gt; &lt;td class="tg-pdeq"&gt;&lt;/td&gt; &lt;td class="tg-pdeq"&gt;&lt;/td&gt; &lt;td class="tg-pdeq"&gt;&lt;/td&gt; &lt;td class="tg-pdeq"&gt;&lt;/td&gt; &lt;td class="tg-pdeq"&gt;&lt;/td&gt; &lt;td class="tg-pdeq" colspan="7"&gt;4. Выплаченные суммы&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="tg-jxgv"&gt; &lt;/td&gt; &lt;td class="tg-l38m" colspan="2"&gt; &lt;/td&gt; &lt;td class="tg-l38m"&gt; &lt;/td&gt; &lt;td class="tg-l38m"&gt; &lt;/td&gt; &lt;td class="tg-l38m"&gt; &lt;/td&gt; &lt;td class="tg-l38m"&gt; &lt;/td&gt; &lt;td class="tg-l38m"&gt; &lt;/td&gt; &lt;td class="tg-jxgv" colspan="3"&gt;Аванс (перечислено в&amp;nbsp;&amp;nbsp;&amp;nbsp;банк)&lt;/td&gt; &lt;td class="tg-l38m" colspan="2"&gt;24.11.23&lt;/td&gt; &lt;td class="tg-l38m" colspan="2"&gt;10 107,15&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="tg-jxgv"&gt; &lt;/td&gt; &lt;td class="tg-l38m" colspan="2"&gt; &lt;/td&gt; &lt;td class="tg-l38m"&gt; &lt;/td&gt; &lt;td class="tg-l38m"&gt; &lt;/td&gt; &lt;td class="tg-l38m"&gt; &lt;/td&gt; &lt;td class="tg-l38m"&gt; &lt;/td&gt; &lt;td class="tg-l38m"&gt; &lt;/td&gt; &lt;td class="tg-jxgv" colspan="3"&gt;Зарплата (перечислено&amp;nbsp;&amp;nbsp;&amp;nbsp;в банк)&lt;/td&gt; &lt;td class="tg-l38m" colspan="2"&gt;10.11.23&lt;/td&gt; &lt;td class="tg-l38m" colspan="2"&gt;20 066,91&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="tg-jxgv"&gt; &lt;/td&gt; &lt;td class="tg-l38m" colspan="2"&gt; &lt;/td&gt; &lt;td class="tg-l38m"&gt; &lt;/td&gt; &lt;td class="tg-l38m"&gt; &lt;/td&gt; &lt;td class="tg-l38m"&gt; &lt;/td&gt; &lt;td class="tg-l38m"&gt; &lt;/td&gt; &lt;td class="tg-l38m"&gt; &lt;/td&gt; &lt;td class="tg-jxgv" colspan="3"&gt;Отпускные&amp;nbsp;&amp;nbsp;&amp;nbsp;(перечислено в банк)&lt;/td&gt; &lt;td class="tg-l38m" colspan="2"&gt;09.11.23&lt;/td&gt; &lt;td class="tg-l38m" colspan="2"&gt;2 956,90&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="tg-jxgv" colspan="7"&gt;Всего натуральных доходов&lt;/td&gt; &lt;td class="tg-l38m"&gt; &lt;/td&gt; &lt;td class="tg-jxgv" colspan="5"&gt;Всего выплат&lt;/td&gt; &lt;td class="tg-l38m" colspan="2"&gt;33 130,96&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt;         `;         console.log(responseData); });

Как сама выглядит таблица:

Стили для таблицы оставлю в комментариях.

Дополнительно:

&lt;style type="text/css"&gt; .tg {border-collapse:collapse;border-spacing:0;} .tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px; overflow:hidden;padding:10px 5px;word-break:normal;} .tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px; font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;} .tg .tg-s9fd{background-color:#E0FFE0;border-color:inherit;text-align:center;vertical-align:top} .tg .tg-oqqy{background-color:#E0FFE0;border-color:inherit;font-weight:bold;text-align:center;vertical-align:top} .tg .tg-l38m{background-color:#FFF;border-color:inherit;text-align:right;vertical-align:top} .tg .tg-fyfk{background-color:#FFF;border-color:inherit;font-weight:bold;text-align:center;vertical-align:top} .tg .tg-nbj5{background-color:#FFF;border-color:inherit;text-align:center;vertical-align:top} .tg .tg-jxgv{background-color:#FFF;border-color:inherit;text-align:left;vertical-align:top} .tg .tg-pdeq{background-color:#FFF;border-color:inherit;font-weight:bold;text-align:left;vertical-align:top} .tg .tg-u0ix{background-color:#FFF;border-color:inherit;font-weight:bold;text-align:right;vertical-align:top} .tg .tg-w5ex{background-color:#FFFBF0;border-color:inherit;text-align:left;vertical-align:top} .tg .tg-g0qq{background-color:#FFFBF0;border-color:inherit;text-align:right;vertical-align:top} .tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top} .tg .tg-dvpl{border-color:inherit;text-align:right;vertical-align:top} &lt;/style&gt;

Андрей Димаков, первый раз вижу использование кириллицы при определении переменных.

думаю стоит выделить именно неработающий кусок таблицы, еще лучше на кодпен залить пример. Уверен многим лениво это анализировать.

структура странная так просто с ней не поработаешь (решение примерное)

перед присвоением container.innerHTML нужно подготовить данные для параллельного прохода по ним:

const nachisleno = responseData.find(i =&gt; i.НАЧИСЛЕНО).НАЧИСЛЕНО; const uderzhano = responseData.find(i =&gt; i.УДЕРЖАНО).УДЕРЖАНО; const upperRows = function*(){   for (let i = 0; i &lt; Math.max(nachisleno.length, uderzhano.length); i += 1) {     yield [ nachisleno[i] ?? {}, uderzhano[i] ?? {}, ];   } };

а потом внутри шаблонной строки responseData.map() заменить на

${Array.from(upperRows()).map(item =&gt; {   const видНачисления = item[0]["ВидНачисления"] || "";   const периодНачисления = item[0]["ПериодНачисления"] || "";   const отработанныеДни = item[0]["ОтработанныеДни"] || "";   const отработанныеЧасы = item[0]["ОтработанныеЧасы"] || "";   const оплаченныеДни = item[0]["ОплаченныеДни"] || "";   const оплаченныеЧасы = item[0]["ОплаченныеЧасы"] || "";   const суммаНачисления = item[0]["СуммаНачисления"] || "";            const видУдержания = item[1]["ВидУдержания"] || "";   const периодУдержания = item[1]["ПериодУдержания"] || "";   const суммаУдержания = item[1]["СуммаУдержания"] || "";                return `     &lt;tr&gt;       &lt;td class="tg-jxgv"&gt;${видНачисления}&lt;/td&gt;       &lt;td class="tg-l38m" colspan="2"&gt;${периодНачисления}&lt;/td&gt;       &lt;td class="tg-l38m"&gt;${отработанныеДни}&lt;/td&gt;       &lt;td class="tg-l38m"&gt;${отработанныеЧасы}&lt;/td&gt;       &lt;td class="tg-l38m"&gt;${оплаченныеДни}&lt;/td&gt;       &lt;td class="tg-l38m"&gt;${оплаченныеЧасы}&lt;/td&gt;       &lt;td class="tg-l38m"&gt;${суммаНачисления}&lt;/td&gt;                &lt;td class="tg-jxgv" colspan="3"&gt;${видУдержания}&lt;/td&gt;       &lt;td class="tg-jxgv" colspan="2"&gt;${периодУдержания}&lt;/td&gt;       &lt;td class="tg-l38m" colspan="2"&gt;${суммаУдержания}&lt;/td&gt;     &lt;/tr&gt;   `; }).join('')}

${Array.from(upperRows()).map(item => { const видНачисления = item[0]["ВидНачисления"] || ""; const периодНачисления = item[0]["ПериодНачисления"] || ""; const отработанныеДни = item[0]["ОтработанныеДни"] || ""; const отработанныеЧасы = item[0]["ОтработанныеЧасы"] || ""; const оплаченныеДни = item[0]["ОплаченныеДни"] || ""; const оплаченныеЧасы = item[0]["ОплаченныеЧасы"] || ""; const суммаНачисления = item[0]["СуммаНачисления"] || ""; const видУдержания = item[1]["ВидУдержания"] || ""; const периодУдержания = item[1]["ПериодУдержания"] || ""; const суммаУдержания = item[1]["СуммаУдержания"] || ""; return ` <tr> <td class="tg-jxgv">${видНачисления}</td> <td class="tg-l38m" colspan="2">${периодНачисления}</td> <td class="tg-l38m">${отработанныеДни}</td> <td class="tg-l38m">${отработанныеЧасы}</td> <td class="tg-l38m">${оплаченныеДни}</td> <td class="tg-l38m">${оплаченныеЧасы}</td> <td class="tg-l38m">${суммаНачисления}</td> <td class="tg-jxgv" colspan="3">${видУдержания}</td> <td class="tg-jxgv" colspan="2">${периодУдержания}</td> <td class="tg-l38m" colspan="2">${суммаУдержания}</td> </tr> `; }).join('')}

snippet

Единственное, в конце формируется лишняя строка, а так все идеально. Ты просто сделал мой вечер
Андрей Димаков, это из-за кривости данных, но исправить это должно быть не сложно
собственно строка генерится из-за вот этого в УДЕРЖАНО:
{ "ВсегоУдержано": 4088 }
{ "ВсегоУдержано": 4088 }
оно по идее или должно быть вместе с последней записью как в НАЧИСЛЕНО, либо там должно быть отдельная запись с ВсегоНачислено

Ответы:

Не по поводу решения, но реальные данные нужно затирать когда показываете пример.
Вы и ваша организация могут попасть на крупный штраф...

Плюс человеку тоже не хотелось бы наверное, чтобы его зп и прочие данные светились в интернете.

Он вроде свои ФИО указал. Но всё равно ход неоднозначный )

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Роман IT Ответ

Для вставки значений из JSON в таблицу, вам необходимо сначала преобразовать JSON в объект или массив в зависимости от используемого языка программирования. Далее вы можете использовать цикл для перебора значений и вставки их в таблицу.

Вот пример на PHP, как можно сделать это:

// Пример JSON
$json = '[
    {"id": 1, "name": "John Doe", "age": 25},
    {"id": 2, "name": "Jane Smith", "age": 30},
    {"id": 3, "name": "Alice Johnson", "age": 35}
]';
 
// Преобразование JSON в массив
$data = json_decode($json, true);
 
// Подключение к базе данных
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
 
$conn = new mysqli($servername, $username, $password, $dbname);
 
// Проверка подключения
if ($conn-&gt;connect_error) {
    die("Connection failed: " . $conn-&gt;connect_error);
}
 
// Вставка данных в таблицу
foreach ($data as $row) {
    $id = $row['id'];
    $name = $row['name'];
    $age = $row['age'];
 
    $sql = "INSERT INTO users (id, name, age) VALUES ('$id', '$name', '$age')";
 
    if ($conn-&gt;query($sql) === TRUE) {
        echo "Record inserted successfully";
    } else {
        echo "Error: " . $sql . "<br>" . $conn-&gt;error;
    }
}
 
$conn-&gt;close();

// Пример JSON $json = '[ {"id": 1, "name": "John Doe", "age": 25}, {"id": 2, "name": "Jane Smith", "age": 30}, {"id": 3, "name": "Alice Johnson", "age": 35} ]'; // Преобразование JSON в массив $data = json_decode($json, true); // Подключение к базе данных $servername = "localhost"; $username = "username"; $password = "password"; $dbname = "myDB"; $conn = new mysqli($servername, $username, $password, $dbname); // Проверка подключения if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } // Вставка данных в таблицу foreach ($data as $row) { $id = $row['id']; $name = $row['name']; $age = $row['age']; $sql = "INSERT INTO users (id, name, age) VALUES ('$id', '$name', '$age')"; if ($conn->query($sql) === TRUE) { echo "Record inserted successfully"; } else { echo "Error: " . $sql . "<br>" . $conn->error; } } $conn->close();

В данном примере мы сначала преобразовали JSON в массив, затем подключились к базе данных и вставили значения из JSON в таблицу "users". Пожалуйста, не забудьте заменить значения переменных для подключения к вашей базе данных.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ VPN Почему подключение через VPN работает только на wi-fi, а через кабель нет, где ошибка? 1 ответ

Вставить значения из JSON в таблицу?

Дополнительно:

Ответы:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно