www.webdeveloper.com
Results 1 to 5 of 5

Thread: Looping multidimensional array into html table displaying incorrectly

  1. #1
    Join Date
    Jun 2012
    Posts
    3

    Looping multidimensional array into html table displaying incorrectly

    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

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,438
    Can you provide a sample of the csv file you are trying to create a table for?

  3. #3
    Join Date
    Jun 2012
    Posts
    3
    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

  4. #4
    Join Date
    Jun 2012
    Posts
    3
    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

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,438

    Lightbulb

    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles