0

I have in Json array of fields like

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

How to create html table using jquery with columns id, name, last name ?

3 Answers 3

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

Note this doesn't create a header row, but you can do this easily in the same manner.

Edit: Not really any need for jQuery here:

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

Obviously you can clean that up a bit to be more DRY, but you get the idea.

Sign up to request clarification or add additional context in comments.

Comments

1

You can use the jQuery templates plugin for this. Here's the source code, and here's the documentation.

1 Comment

Note: The jQuery team has decided not to take this plugin past beta. It is no longer being actively developed or maintained.
0
    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>

this is a simple perl cgi program which will create an html table from JSON file. you can see complete program at http://www.ssiddique.info/creating-html-table-using-json-file.html

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.