CODEWITHSUNDEEP
javascripthtml-table
tempid
tempid

Reputation: 8198

Display array data in a table with 2 columns using Javascript

I have the following code - 

    <script type="text/javascript">
function test() {
    var results = "";
    var myArray    = new Array();
    myArray[0] = "Customizable";
    myArray[1] = "Marketing Collateral";
    myArray[2] = "Online Marketing";
    myArray[3] = "Training";
    myArray[4] = "Event Resources";
    myArray[5] = "Marketing Logos";
    myArray[6] = "Competitive Solution Comparison";
    myArray[7] = "Sales Tools";
    myArray[8] = "Retail Marketing"
    myArray[9] = "Internal";        

    results = "<table>";
for (var i=0; i<myArray.length; i++) {
    results += "<tr><td>" + myArray[i] + "</td>";  
    results += "<td>" + myArray[i+1] + "</td></tr>";  
}

results += "<tr><td colspan=2><a href='#' onclick='javascript:RedirectParentToDownload();'>View all content ></a></td></tr>";
results += "<table><br /> <br />";

 var div = document.getElementById("associatedAssets");
    div.innerHTML = results;    
}
</script>
<body onload="javascript:test();">
<div id="associatedAssets"></div>


 </body>

How do I get the output to be rendered as 2 columns and n rows? I want the output to look something like this -

    Customizable      Marketing Collateral
    Online Marketing  Training
    Event Resources   Marketing Logos
    etc

Upvotes: 1

Views: 18838

Answers (3)

Bakudan
Bakudan

Reputation: 19482

Here it is, working and fixed.

Here you have to skip 2nd number, because of the 2 columns

for (var i = 0; i < myArray.length; i+=2 )

You also have to check the second element. If the elements in the array are even no problem, they are divisable by 2. If it is odd, you are calling for element that does not exist. Check if it is undefined with ternary operator

( myArray[i+1]===undefined ? '' : myArray[i+1] )

or more simple

( myArray[i+1] || '' )

Upvotes: 1

Chandu
Chandu

Reputation: 82893

You need to use an increment of 2 for i in your for loop.
Also add a check to see if the i+1th element exists before using it while concatenating the array content to HTML string.

Try this:

    function test() {
        var results = "";
        var myArray    = new Array();
        myArray[0] = "Customizable";
        myArray[1] = "Marketing Collateral";
        myArray[2] = "Online Marketing";
        myArray[3] = "Training";
        myArray[4] = "Event Resources";
        myArray[5] = "Marketing Logos";
        myArray[6] = "Competitive Solution Comparison";
        myArray[7] = "Sales Tools";
        myArray[8] = "Retail Marketing"
        myArray[9] = "Internal";        

        results = "<table>";
            for (var i=0; i<myArray.length; i=i+2) { //###NOTICE THE CHANGE FROM i++ TO     i=i+2               
                results += "<tr><td>" + myArray[i] + "</td>";  
                if(i+1 < myArray.length){
                                results += "<td>" + myArray[i+1] + "</td></tr>";  
                } else{
                             results += "<td></td></tr>";   
                }
            }

        results += "<tr><td colspan=2><a href='#' onclick='javascript:RedirectParentToDownload();'>View all content ></a></td></tr>";
        results += "<table><br /> <br />";

         var div = document.getElementById("associatedAssets");
        div.innerHTML = results;    
    }

Upvotes: 0

James Montagne
James Montagne

Reputation: 78630

If you change your loop to this:

for (var i=0; i<myArray.length; i=i+2) {

Then your code basically works. You will however want to check that myArray[i+1] exists so that it also works with an odd number of elements.

Upvotes: 1

Related Questions