Convert json to html table

[vincekaribusana]

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

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


    });

[chilledoj]

You know the answer to this already. If you look at your data the ricevute property/node is an array of items, and to generate each row you used the $.each command.

Within that each function, you would run another $.each command to build a second table and append as another <td> to the row. So something like the below could be used. (not tested)

$.each(datas.condomini[0].ricevute, function(i, item) {
  var $righe = $('<table>');
  $.each(item.righe, function(j, r) {
    $('tr').append(
      $('<td>').text(r.importoPagato),
      $('<td>').text(r.importoCredito),
      $('<td>').text(r.importoResiduo),
      $('<td>').text(r.scala)
  }).appendTo($righe);

  var $tr = $('<tr>').append(
              $('<td>').text(item.data),
              $('<td>').text(item.numero),
              $('<td>').text(item.descrizione),
              $('<td>').text(item.totale),
              $('<td>').html($righe)
          ).appendTo('#records_table');
});

This excludes any table headers so will need more work. However, using jquery to build the table like this is not my preferred option. There are also other ways to achieve this:

• Build table(s) in string (plain string or ES6 template string) and set innerHTML of element
• Use a template library (e.g. handlebars etc)
• Use React, Vue, Angular, other

For very simple applications I like to use building a string of the HTML using ES6 template strings (you might need babel/webpack/parcel dependent on browsers you are targeting) and just setting the innerHTML of the parent element. You can build a generic table builder (similar to the jsontable link you had) using Object.keys to inspect the data. Something like http://jsfiddle.net/1x3wy2vf/

[vincekaribusana]

Hi @chilledoj many thanks for your answer I will definitely have alook at template kibrary, in the mean time could you please help me to add table headers? many thanks for your help