Разбор объектов JSON в HTML-таблице

Question

Я пытаюсь разобрать объект JSON в html-таблицу, однако я не могу понять, что это правильно.

DESIRED ФОРМАТ:

Last Year  This Year  Future Years 
45423   36721   873409 

ТОК ФОРМАТ:

Last Year  45423 
This Year  36721 
Future Years 873409 

JSON:

[{column_name:"Last Year", "column_data":45423},{column_name:"This Year", "column_data":36721},{column_name:"Future Years", "column_data":873409}] 

HTML:

<div class="panel-body"> 
    <div id="main-aged-debtors-bar" style="height: 250px"></div> 
    <div> 
     <table class="table table-hover" id="crpw_table"> 
      <thead> 
      </thead> 
      <tbody> 
      </tbody> 
     </table> 
    </div> 
</div> 

КОД:

$.getJSON(url, jsonObject, 
    function (data) { 
     for (var i = 0; i < data.length; i++) { 
      tr = $('<tr/>'); 
      tr.append("<td>" + data[i].column_name + "</td>"); 
      tr.append("<td>" + data[i].column_data + "</td>"); 
      $('#crpw_table').append(tr); 
     } 
    }); 

Answer 1

$.getJSON(url, jsonObject, 
    function (data) { 
     var tr = $('<tr/>'); 
     for (var i = 0; i < data.length; i++) { 
      tr.append("<td>" + data[i].column_name + "</td>"); 
     } 
     $('#crpw_table').append(tr); 
     tr = $('<tr/>'); 
     for (i = 0; i < data.length; i++) { 
      tr.append("<td>" + data[i].column_data + "</td>"); 
     } 
     $('#crpw_table').append(tr); 
    }); 

Answer 2

Это не сильно отличается

$.getJSON(url, jsonObject, 
    function (data) { 
     tr1 = $('<tr/>'); 
     tr2 = $('<tr/>'); 
     for (var i = 0; i < data.length; i++) { 
      tr1.append("<td>" + data[i].column_name + "</td>"); 
      tr2.append("<td>" + data[i].column_data + "</td>"); 
     } 
     $('#crpw_table').append(tr1); 
     $('#crpw_table').append(tr2); 
    } 
); 

Answer 3

Try,

$.getJSON(url, jsonObject, 
    function (data) { 
     var tr1 = $('<tr/>'); 
     var tr2 = $('<tr/>'); 
     for (var i = 0; i < data.length; i++) { 

      tr1.append("<td>" + data[i].column_name + "</td>"); 
      tr2.append("<td>" + data[i].column_data + "</td>"); 

    } 
    $('#crpw_table').append(tr1).append(tr2); 
});