<script type="text/javascript">
var myList = [
  { "name": "abc", "age": 50 },
  { "age": "25", "hobby": "swimming" },
  { "name": "xyz", "hobby": "programming" }
];

  function loadFormBDetails(formId){
   buildHtmlTable('#formBDetailsTable', myList);
 }
</script>

<script type="text/javascript">
// based on an answer found at https://stackoverflow.com/questions/5180382/convert-json-data-to-a-html-table

// Builds the HTML Table out of myList.
function buildHtmlTable(selector, dataList) {
  AJS.$(selector).html('');
  var columns = addAllColumnHeaders(dataList, selector);

  for (var i = 0; i < dataList.length; i++) {
    var row$ = AJS.$('<tr/>');
    for (var colIndex = 0; colIndex < columns.length; colIndex++) {
      var cellValue = dataList[i][columns[colIndex]];
      if (cellValue == null) cellValue = "";
      row$.append(AJS.$('<td/>').html(cellValue));
    }
    $(selector).append(row$);
  }
}

// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records.
function addAllColumnHeaders(dataList, selector) {
  var columnSet = [];
  var headerTr$ = AJS.$('<tr/>');

  for (var i = 0; i < dataList.length; i++) {
    var rowHash = dataList[i];
    for (var key in rowHash) {
      if ($.inArray(key, columnSet) == -1) {
        columnSet.push(key);
        headerTr$.append(AJS.$('<th/>').html(key));
      }
    }
  }
  $(selector).append(headerTr$);

  return columnSet;
}
</script>