Điền một bảng từ JSON với jQuery

Question

Đây có phải là cách hiệu quả để điền bảng từ dữ liệu JSON bằng jQuery hoặc có cách tốt hơn/ít tốn kém hơn không? Số hàng tối đa sẽ vào khoảng 100. Tôi không muốn sử dụng plugin.

JS:

$.ajax({ 
    url: 'public.json', 
    dataType: 'json', 
    success: function(data) { 
     var row = '<tr class="header">'; 
     for (var i in data.headers) { 
      row += '<th style=""><a href="#" class="sort"><span>' + data.headers[i] + '</span></a></th>'; 
     } 
     row += '</tr>' 
     $(row).appendTo('table.data'); 
     row = ''; 
     for (var i in data.rows) { 
      row += '<tr id="' + i + '">'; 
      row += '<td>' + data.rows[i].date + '</td>'; 
      row += '<td>' + data.rows[i].company + '</td>'; 
      row += '<td>' + data.rows[i].location + '</td>'; 
      ... 
      row += '</tr>'; 
     } 
     $(row).appendTo('table.data'); 
    }, 
}); 

JSON:

{ 
    "headers": { 
     "date": "Date", 
     "company": "Company", 
     "location": "Location", 
     ... 
    }, 
    "rows": [{ 
     "date": "09/18/2011", 
     "company": "Company name", 
     "location": "US", 
     ... 
    }, 
    ... 
} 

EDIT: Về cơ bản, tôi đang cố gắng tìm hiểu xem lumping tất cả các hàng vào một chuỗi, biến nó thành một đối tượng jQuery và sau đó gắn nó vào bảng là một ý tưởng hay, giả sử điều này có thể được thực hiện nhiều lần trên trang để làm mới dữ liệu.

Answer 1

Thay vì for .. in cú pháp và chuỗi xây dựng, tôi sẽ sử dụng jQuery.each() function

Như thế này:

$.ajax({ 
    url: 'public.json', 
    dataType: 'json', 
    success: function(data) { 
     var $tr =$('<tr>').addClass('header'); 
     $.each(data.headers, function(i,header){ 
      $tr.append($('<th>').append($('a').addClass('sort').attr('href','#').append($('span').text(header)))); 
     }); 
     $tr.appendTo('table.data'); 
     $.each(data.rows,function(i,row){ 
      $('<tr>').attr('id',i). 
       append($('<td>').text(row.date)). 
       append($('<td>').text(row.company)). 
       append($('<td>').text(row.location)).appendTo('table.data'); 
     }); 
    } 
});