Блог

У меня в Json есть массив полей типа

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

Как создать HTML-таблицу с помощью jquery со столбцами id, name, last name?

 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(json[i].id));
    row.appendChild(td);

    //create name column
    td = document.createElement('td');
    td.appendChild(document.createTextNode(json[i].name));
    row.appendChild(td);

    //create last_name column
    td = document.createElement('td');
    td.appendChild(document.createTextNode(json[i].last_name));
    row.appendChild(td);

    table.appendChild(row);
}

document.body.appendChild(table);
  

Очевидно, что вы можете немного подчистить это, чтобы было более СУХО, но вы поняли идею.

Для этого вы можете использовать плагин jQuery templates. Вот исходный код, и вот документация.

     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>
  

это простая cgi-программа на perl, которая создаст html-таблицу из файла JSON. вы можете увидеть полную программу на http://www.ssiddique.info/creating-html-table-using-json-file.html