Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!
Convert json to html table
Hi I need to convert the followwing json into a html table
so far this is what i’ve managed to do, but i don’t know how to render the array “righe”, if you put the json code into http://json2table.com/ then you have an idea how the table should look like.
{
"condomini": [
{
"ricevute": [
{
"data": "31/10/2017",
"numero": "1715759",
"dettagli": "Contante",
"descrizione": "Versamento giuseppe rossi rata ottobre - dicembre più contributo riparazione cancello A",
"totale": "108,00",
"righe": [
{
"importoPagato": "5,00",
"importoCredito": "5,00",
"importoResiduo": "0,00",
"scala": "B",
"piano": "2",
"interno": "12",
"descrizione": "Contributo per riparazione cancello A"
},
{
"importoPagato": "103,00",
"importoCredito": "103,00",
"importoResiduo": "0,00",
"scala": "B",
"piano": "2",
"interno": "12",
"descrizione": "Rata ottobre - dicembre 2017"
}
]
},
{
"data": "07/07/2017",
"numero": "1714280",
"dettagli": "Contante",
"descrizione": "Versamento giuseppe rossi",
"totale": "106,00",
"righe": [
{
"importoPagato": "3,00",
"importoCredito": "103,00",
"importoResiduo": "0,00",
"scala": "B",
"piano": "2",
"interno": "12",
"descrizione": "Rata aprile - giugno 2017"
},
{
"importoPagato": "103,00",
"importoCredito": "103,00",
"importoResiduo": "0,00",
"scala": "B",
"piano": "2",
"interno": "12",
"descrizione": "Rata luglio - settembre 2017"
}
]
},
{
"data": "28/04/2017",
"numero": "1712924",
"dettagli": "Contante",
"descrizione": "Versamento giusepe rossi",
"totale": "100,00",
"righe": [
{
"importoPagato": "100,00",
"importoCredito": "103,00",
"importoResiduo": "3,00",
"scala": "B",
"piano": "2",
"interno": "12",
"descrizione": "Rata aprile - giugno 2017"
}
]
},
{
"data": "06/01/2017",
"numero": "1710299",
"dettagli": "Contante",
"descrizione": "Versamento giuseppe rosi",
"totale": "73,62",
"righe": [
{
"importoPagato": "-29,38",
"importoCredito": "-29,38",
"importoResiduo": "0,00",
"scala": "B",
"piano": "2",
"interno": "12",
"descrizione": "Conguaglio Riparto ordinario 2016"
},
{
"importoPagato": "103,00",
"importoCredito": "103,00",
"importoResiduo": "0,00",
"scala": "B",
"piano": "2",
"interno": "12",
"descrizione": "Rata gennaio - marzo 2017"
}
]
}
]
}
]
}
so far this is what i’ve managed to do, but i don’t know how to render the array “righe”, if you put the json code into http://json2table.com/ then you have an idea how the table should look like.
$.ajax({
type: "json",
url: "../km-client-controllers/km-ctrl-client-ricevute.php",
success: function(result) {
datas = JSON.parse(result);
$('#nome_condominio').html(datas.condomini[0].condominio.nome);
$('#indirizzo_condominio').html(datas.condomini[0].condominio.indirizzo);
$.each(datas.condomini[0].ricevute, function(i, item) {
var $tr = $('<tr>').append(
$('<td>').text(item.data),
$('<td>').text(item.numero),
$('<td>').text(item.descrizione),
$('<td>').text(item.totale)
).appendTo('#records_table');
});
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
You can solve this using recursion.
<script>
function createTable(data)
{
var table = document.createElement('table');
var header = table.insertRow();
for(var h in data[0]) {
var th = document.createElement('th');
th.innerHTML = h;
header.appendChild(th);
}
table.classList.add('table');
data.forEach(function(item) {
var row = table.insertRow();
for(var v in item) {
var cell = row.insertCell();
if (Array.isArray(item[v])) {
var subtable = createTable(item[v]);
cell.appendChild(subtable);
}
else {
cell.innerHTML = item[v];
}
}
})
return table;
}
$(function() {
$.get('t3414.json', function(resp) {
var table = createTable(resp.condomini[0].ricevute);
$('#tableContainer').append(table);
}, 'JSON');
});
</script>
Wow this is amazing and it works fine, do you think i can youse this funcion also for other json as well? Or is specifically thought just for table layout? Many many thanks for your help
If i can ask also, this code uses the json key as header for the table, is it by any chance possible to change them?
This will work on any JavaScript object (with arrays of objects)
Header - you can change them but then you have to customise the solution or the JSON structure to include headers
Or
If you only want headers on the main table you could pass an array of header values to the table function
Or
You could pass a nested structure of header values into the table function and on each recursive call the createTable function is called with the next layer of headers (if one exists)
Header - you can change them but then you have to customise the solution or the JSON structure to include headers
Or
If you only want headers on the main table you could pass an array of header values to the table function
Or
You could pass a nested structure of header values into the table function and on each recursive call the createTable function is called with the next layer of headers (if one exists)
Just re-read your comment
You can use other JSON to create a table - what else did you want to do with it?
do you think i can youse this funcion also for other json as wellNot sure what you mean?
You can use other JSON to create a table - what else did you want to do with it?
Hi Julian sorry i couldn't answer earlier. Yes sorry that was a stupid question. If yu don't mind I would also ask you another question, at the moment I'm doing a request to a php file where the start date and and date are set as constant, now I would like to use a form where i can select start date and end date and then pass these to the php file. I've tried with a ajax call but it still does load the json into the form action url wich is my php file. Do you know why? Many thanks
Premium Content
You need an Expert Office subscription to comment.Start Free Trial