Avatar of Vincenzo Vecchio
Vincenzo Vecchio
 asked on

Convert json to html table

Hi I need to convert the followwing json into a html table

{
  "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"
            }
          ]
        }
      ]
    }
  ]
}

Open in new window


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');


    });

Open in new window

JavaScript

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Julian Hansen

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.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Vincenzo Vecchio

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
Vincenzo Vecchio

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?
Julian Hansen

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)
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Julian Hansen

Just re-read your comment
do you think i can youse this funcion also for other json as well
Not sure what you mean?
You can use other JSON to create a table - what else did you want to do with it?
Vincenzo Vecchio

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
Julian Hansen

I would need to see code - but best to open another question and post link here.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.