asked on
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');
});
JavaScript
Last Comment
Julian Hansen
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
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
ASKER
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?
ASKER
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
I would need to see code - but best to open another question and post link here.