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

Vincenzo VecchioAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
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>

Open in new window

Working sample here

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Vincenzo VecchioAuthor Commented:
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 VecchioAuthor Commented:
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?
Ensure Business Longevity with As-A-Service

Using the as-a-service approach for your business model allows you to grow your revenue stream with new practice areas, without forcing you to part ways with existing clients just because they don’t fit the mold of your new service offerings.

Download eBook
Julian HansenCommented:
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)
Julian HansenCommented:
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 VecchioAuthor Commented:
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 HansenCommented:
I would need to see code - but best to open another question and post link here.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.