Get data from an array and add it to a table - JavaScript

Question

$("#reg").click(function() { $.ajax({ url: 'insert.php', //Файл в который отсылаем данные type: "POST", // Как передаем POST or GET success: function(data) { $('#info').text(data); var res = JSON.parse(data) console.log(data); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="info"></div> <!-- Form: the action="javascript:insert()"calls the javascript function "insert" into ajax_framework.js --> <button id="reg" value="Insert"> dff</button>

Array of this kind

 {"0":"1","ID":"1","1":"2017-10-21 12:39:23","Date":"2017-10-21 12:39:23","2":"Student1","Name":"Student1","3":"student1@stud.com","Email":"student1@stud.com","4":"89123456789","Phone":"89123456789","5":"\u042d\u0423-119","Group":"\u042d\u0423-119","6":"\u041f\u043e\u0436\u0435\u043b\u0430\u043d\u0438\u044f","Comment":"\u041f\u043e\u0436\u0435\u043b\u0430\u043d\u0438\u044f"}

Tell me how to implement it correctly?

Yuri yuri 13.3k five 36 82 · Accepted Answer · 2017-10-21T19:24:22

If I correctly understood the task, then something like this:

 $("#reg").click(function() { var $table = $('#my_table'), $table_head = $table.find('thead'), $table_body = $table.find('tbody'); $.ajax({ url: 'insert.php', //Файл в который отсылаем данные type: "POST", // Как передаем POST or GET success: function(data) { $('#info').text(data); var res = JSON.parse(data) // Перебираем массив res.forEach(function(value) { // Добавляем строку в таблицу var $table_tr = $table_body.append('<tr></tr>') for (var key in value) { if (Number(key) !== parseFloat(key)) { // Создаём заголовки, которых нет if (!$table.find('thead td:contains("' + key + '")').length) $table_head.append('<td>' + key + '</td>'); // Добавляем данные в строку $table_tr.append('<td>' + value[key] + '</td>') }; }; }); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="info"></div> <!-- Form: the action="javascript:insert()"calls the javascript function "insert" into ajax_framework.js --> <button id="reg" value="Insert"> dff</button> <table id="my_table"> <thead> </thead> <tbody> </tbody> </table>

You can also generate a table directly on the server side, but that's another story ...

Example:

 // Переменная для примера var res = [{"0":"1","ID":"1","1":"2017-10-21 12:39:23","Date":"2017-10-21 12:39:23","2":"Student1","Name":"Student1","3":"student1@stud.com","Email":"student1@stud.com","4":"89123456789","Phone":"89123456789","5":"\u042d\u0423-119","Group":"\u042d\u0423-119","6":"\u041f\u043e\u0436\u0435\u043b\u0430\u043d\u0438\u044f","Comment":"\u041f\u043e\u0436\u0435\u043b\u0430\u043d\u0438\u044f"}, {"0":"2","ID":"2","1":"2017-10-21 12:39:23","Date":"2017-10-21 12:39:23","2":"Student2","Name":"Student2","3":"student1@stud.com","Email":"student2@stud.com","4":"89123456789","Phone":"89864256789","5":"\u042d\u0423-119","Group":"\u042d\u0423-119","6":"\u041f\u043e\u0436\u0435\u043b\u0430\u043d\u0438\u044f","Comment":"\u041f\u043e\u0436\u0435\u043b\u0430\u043d\u0438\u044f"}]; $("#reg").click(function() { var $table = $('#my_table'), $table_head = $table.find('thead'), $table_body = $table.find('tbody'); // Перебираем массив res.forEach(function (value) { // Добавляем строку в таблицу var $table_tr = $table_body.append('<tr></tr>') for(var key in value) { if (Number(key) !== parseFloat(key)) { // Создаём заголовки, которых нет if (!$table.find('thead td:contains("' + key + '")').length) $table_head.append('<td>' + key + '</td>'); // Добавляем данные в строку $table_tr.append('<td>' + value[key] + '</td>') }; }; }); /*$.ajax({ url: 'insert.php', //Файл в который отсылаем данные type: "POST", // Как передаем POST or GET success: function(data) { $('#info').text(data); var res = JSON.parse(data) console.log(data); } });*/ });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="info"></div> <!-- Form: the action="javascript:insert()"calls the javascript function "insert" into ajax_framework.js --> <button id="reg" value="Insert"> dff</button> <table id="my_table"> <thead> </thead> <tbody> </tbody> </table>

Get data from an array and add it to a table - JavaScript

1 answer 1

More articles: