Looping multidimensional array into html table displaying incorrectly

**patticus** · 06-12-2012, 11:59 AM

Hello All,

I'm trying to take a multi-dimensional array and publish it into an HTML table. The solution I come up seems to be publishing the HTML incorrectly.

Here's the function I am using;

Code:

    function test() {
        $("#test").html("<table>");
        for (i = 0; i < oneLen; i++) {
            $("#test").append("<tr>");
            for (j = 0; j < oneRow[i].length; j++) {
                $("#test").append("<td>" + oneRow[i][j] +"</td>");
            }//end j
            $("#test").append("</tr>");
        }//end i
        $("#test").append("</table>");
    }//end test

When running the function I am expecting the html information to look as below;

<table>
<tr> <td>5</td><td>6</td> </tr>
<tr> <td>8</td><td>9</td> </tr>
</table>

Instead I am seeing this when viewing the HTML;

<table></table>
<tr></tr>
<td>5</td>
<td>6</td>
<tr></td>
<td>8</td>
<td>9</td>

The application is reading a CSV file from a server and turning it into an array so it can be seen in the users browser as a table. Each datapoint/row is going to be assigned a class eventually in the looping process for the CSS. I just want to make sure what I'm writing is correct so my conditional's are correct when I add in those sub line assignments. I've only been doing this for about 90 days so if I'm missing something obvious please let me know.

Thank you all for any help,

Patticus

**JMRKER** · 06-12-2012, 06:25 PM

Can you provide a sample of the csv file you are trying to create a table for?

**patticus** · 06-13-2012, 06:39 AM

Here's the CSV data information; really its not much.

ANP,2,2,1
HER,1,1,1
LD,4,4,1
MIC,20,145,7.25
NIC,12,205,17.08
NSY,23,44,1.91
S4,1,1,1
S5,29,118,4.07
S6,25,122,4.88
SIC,14,104,7.43
T3,31,136,4.39
T4,27,90,3.33
T5,20,94,4.7
T6,24,80,3.33
W2,2,4,2
WA1,12,21,1.75
WA2,21,43,2.05
Total,268,1214,4.53

**patticus** · 06-13-2012, 07:03 AM

Found a solution that works differently; I've included the code below as this seems to work pretty well. The difference is that I've created a single variable and modified with my loops.

Code:

    function test() {
        var table = '<table>';        
        for (i = 0; i < oneLen; i++) {            
            for (j = 0; j < oneRow[i].length; j++) {
                if (j == 0) {
                    table += '<tr><td>' + oneRow[i][j] + '</td>';
                } else if (j == oneRow[i].length - 1) {
                    table += '<td>'+oneRow[i][j]+'</td></tr>';
                } else {
                    table += '<td>' + oneRow[i][j] + '</td>';
                }//end if
            }//end j
        }//end i
        table += '</table>';
        $("#test").html(table);
    }//end test

**JMRKER** · 06-13-2012, 08:57 AM

Alternative solution using only one loop...

Code:

<!DOC HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
//<![CDATA[
// From:http://www.webdeveloper.com/forum/showthread.php?p=1210892#post1210892

var CSVinfo =  // simulated text file with elements representing lines
   'ANP,2,2,1\n'+
   'HER,1,1,1\n'+
   'LD,4,4,1\n'+
   'MIC,20,145,7.25\n'+
   'NIC,12,205,17.08\n'+
   'NSY,23,44,1.91\n'+
   'S4,1,1,1\n'+
   'S5,29,118,4.07\n'+
   'S6,25,122,4.88\n'+
   'SIC,14,104,7.43\n'+
   'T3,31,136,4.39\n'+
   'T4,27,90,3.33\n'+
   'T5,20,94,4.7\n'+
   'T6,24,80,3.33\n'+
   'W2,2,4,2\n'+
   'WA1,12,21,1.75\n'+
   'WA2,21,43,2.05\n'+
   'Total,268,1214,4.53\n';

function populateTable(CSVstr) {  // retrieve file using ajax function
  var tarr = CSVstr.split('\n');
  var str = '<table border="1" align="center">';
  var tmp = [];
  for (var i=0; i<tarr.length; i++) {
    tmp = tarr[i].split(',');
    str += '<tr><td>'+tmp.join('</td><td>')+'</td></tr>';
  }
  str += '</table>';
  document.getElementById('tbl').innerHTML = str;;
}

window.onload = function() {
 populateTable(CSVinfo);
}
//]]>
</script>

</head>
<body>
<div id="tbl"></div>
</body>
</html>

Thread: Looping multidimensional array into html table displaying incorrectly

Thread Tools

Display

Looping multidimensional array into html table displaying incorrectly

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions