n length array data populating in dinamic html table

Display Array Data in an a Tabular Format
By Nagarjun Reddy
Most languages provide plenty of array utility functions from slicing(), merging, flattening(), filtering() and mapping(), but one thing that you typically have to do yourself is transform arrays to display them in a tabular format. Why would you want to do this? Presenting information in a table is a great way to separate categories, sort elements, as well as maximize screen real estate. I recently arranged an array of objects into a 4 x 3 table of checkboxes in order to avoid having a list of up to 15 items, which would necessitate a lot of scrolling on the user’s part. In today’s article, I’ll show you how to dynamically transform the contents of a one-dimension array into an HTML table on both the server and client, using PHP and JavaScript respectively.
The Array Structure

For the purposes of today’s examples, the display function expects an array of objects where each has two properties: a slug (unique key) and name (label):

Element 1: {slug: ‘menu_allergen_milk’, name: ‘Milk’}
Element 2: {slug: ‘menu_allergen_peanut’, name: ‘Peanuts’}
Element 3: {slug: ‘menu_allergen_sulphites’, name: ‘Sulphur dioxide’}
Element 4: {slug: ‘menu_allergen_celery’, name: ‘Celery’}
Element 5: {slug: ‘menu_allergen_seafood’, name: ‘Seafood’}
Element 6: {slug: ‘menu_allergen_mustard’, name: ‘Mustard’}
etc…

Producing an HTML Table using JavaScript

Whatever language you employ to implement the functionality, the idea is always the same:
Print out the start of the table, up to, but not including the first <TR> row tag.
Iterate over each array element.
For each element:
If it’s the first cell, print the <TR> row tag.
Print the table cell and element contents.
If we’ve printed the number of columns that we want, print the closing <TR> row tag and reset the cell counter.
Print out the below of the table.

…which looks like this in the browser:

Milk	Peanuts	Sulphur dioxide	Celery
Seafood	Mustard

Scripting above above table

var $menu_tags = [
{slug: ‘menu_allergen_milk’, name: ‘Milk’},
{slug: ‘menu_allergen_peanut’, name: ‘Peanuts’},
{slug: ‘menu_allergen_sulphites’, name: ‘Sulphur dioxide’},
{slug: ‘menu_allergen_celery’, name: ‘Celery’},
{slug: ‘menu_allergen_seafood’, name: ‘Seafood’},
{slug: ‘menu_allergen_mustard’, name: ‘Mustard’}
];
var MENU_TAGS_COLUMN_COUNT = 4;

(function printArrayInTabularFormat() {
var html = ‘<table name=”tblMenuAllergens” cellpadding=”1″ border=”1″><thead></thead><tbody>’ + “\n”;
var colCount = 4; // nees to specify how many columns in table.
var cellIndex=1;
for (var i=0; i<menuTags.length; i++) {
if (cellIndex == 1) {
html += ‘<tr>';
}
var id = menuTags[i][‘slug’];
var name = menuTags[i][‘name’];
html += ‘<td width=”120″>’ + $name + ‘</td>’ + “\n”;
if (++cellIndex > colCount) { //close the row
html += ‘</tr>';
cellIndex = 1;
}
}
//finish empty cells
var remainingCellsCount = menuTags.length % colCount;
if (remainingCellsCount) {
for (var i=0; i<remainingCellsCount; i++) {
html += ‘<td width=”120″> </td>’ + “\n”;
}
html += ‘</tr>';
}
html += ‘</tbody></table>’ + “\n”;
html += ‘</td></tr></tbody></table>’ + “\n”;

document.getElementById(‘allergensTable’).innerHTML = html;
})
Here is the generated code this time:
<table name=”tblMenuAllergens” cellpadding=”1″ border=”1″>
<tbody>
<tr>
<td width=”120″>
Milk
</td>
<td width=”120″>
Peanuts
</td>
<td width=”120″>
Sulphur dioxide
</td>
<td width=”120″>
Celery
</td>
</tr>
<tr>
<td width=”120″>
Seafood
</td>
<td width=”120″>
Mustard
</td>
<td width=”120″>

</td>
<td width=”120″>

</td>
</tr>
</tbody>
</table>