如何從簡單的JSON文件

Question

創建HTML表我已經在領域的JSON數組一樣

[ 
    { 
     "id": 1, 
     "name": "test", 
     "last_name": "test", 
    }, 
    { 
     "id": 2, 
     "name": "test1", 
     "last_name": "test1", 
    }, 
    { 
     "id": 2, 
     "name": "test2", 
     "last_name": "test2", 
    } 
] 

如何使用jQuery的列ID，名稱創建HTML表，姓什麼？

Answer 1

你可以使用jQuery模板插件。 Here's the source code和here's the documentation。

Answer 2

var json = [Your JSON here]; 
var $table = $('<table/>'); 

$.each(json, function(index, value) { 
    //create a row 
    var $row = $('<tr/>'); 

    //create the id column 
    $('<td/>').text(value.id).appendTo($row); 

    //create name column 
    $('<td/>').text(value.name).appendTo($row); 

    //create last_name 
    $('<td/>').text(value.last_name).appendTo($row); 

    $table.append($row); 
}); 

//append table to the body 
$('body').append($table); 

請注意，這不會創建標題行，但您可以用同樣的方式輕鬆完成此操作。

編輯：不是真的需要任何jQuery的位置：

var json = [Your JSON here], 
    table = document.createElement('table'); 

for(var i = 0, il = json.length; i < il; ++i) { 
    //create row 
    var row = document.createElement('tr'), 
     td; 

    //create the id column 
    td = document.createElement('td'); 
    td.appendChild(document.createTextNode(value.id)); 
    row.appendChild(td); 

    //create name column 
    td = document.createElement('td'); 
    td.appendChild(document.createTextNode(value.name)); 
    row.appendChild(td); 

    //create last_name column 
    td = document.createElement('td'); 
    td.appendChild(document.createTextNode(value.last_name)); 
    row.appendChild(td); 

    table.appendChild(row); 
} 

document.body.appendChild(table); 

很明顯，你可以清理一下有點更加乾燥，但你的想法。

Answer 3

my $json; 
{ 
    local $/; #Enable 'slurp' mode 
    open my $fh, "<", "C:/path_to_json_file/data.json"; 
    $json = <$fh>; 
    close $fh; 
} 
my $data = decode_json($json); 
my $array = $data->{'employees'}; 
print"<table cellpadding='0' cellspacing='0' border='0' class='pretty' id='example' > 
    <thead> 
     <tr> 
     <th>SNo.</th> 
     <th>Row1</th> 
     <th>Row2</th> 
     </tr> 
    </thead> 
    <tbody>"; 
foreach my $item (@$array){ 
    print "<tr>"; 
    print "<td>" . $item->{'SNo'} . "</td>"; 
    print "<td>" . $item->{'Row1'} . "</td>"; 
    print "<td>" . $item->{'Row2'} . "</td>"; 
    </tr>"; 
} 
print "</tbody></table> 

這是一個簡單的perl cgi程序，它將從JSON文件創建一個html表。你可以看到完整的程序在http://www.ssiddique.info/creating-html-table-using-json-file.html