The term "Optimal solution" is biased. What is a good solution for sure: Use JQuery to do it.
Example:
<!-- Include JQuery, only one time in the page header -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.getJSON("/admin/json/endpoint",function(data) {
$.each(data.collection, function(i,e) {
var lmod = formatDate(new Date(e["lmodified"]));
var row = "<tr><td>"+e["name"]+"</td><td>"+lmod+"</td>"
$("#dpub tr:first").after(row);
});
});
</script>
<table id="dpub" style="width:100%;">
<tr>
<th style="width:20%;">Name</th>
<th>Last modified</th>
</tr>
</table>
See: http://api.jquery.com/jquery.getjson/
console.log(data) can help you to understand the structure of the returned object in javascript. Open your browser javascript console to see the contents.
When things are getting complex and you don't only want to add simple rows to a table, consider to use a template engine like mustache.js