loop through a 2D array

[techyworld]

I want to retrieve every 3 elements in rows and push it in another array. for Ex:retrieve array index
[0,1,2]
[1,2,3]
[2,3,4]
[5,6,7]
[8,9,10] it goes on like this for all rows. Can someone help?

     function drawTable() {
        var div_id = document.getElementById('div1');
        var tbl = document.createElement("table");
        tbl.setAttribute("id","table_id") ;
        tbl.setAttribute("border","1") ;
        div_id.appendChild(tbl);
        var tabl_id = document.getElementById("table_id");

        for(var i=0;i<5;i++){
            var row=document.createElement('tr');
                totalRows[i]= new Array();
            for(var j=0;j<10;j++){
                var cell=document.createElement('td');
                cell.setAttribute("width","100px") ;
                cell.setAttribute("height","35px") ;
                cell.innerHTML = " "+j;
                row.appendChild(cell);
            }
        tabl_id.appendChild(row);
        }
    }

[techyworld]

I add this function to retrieve all element in the first row. But still it doesnt work! :(
it alert [object][text]

function generate(){

        for (var i=0;i<totalRows.length-1; ++i)
        {
            var node = totalRows[i][0];
            alert(node);
        }

    }

[techyworld]

it seems its not filling my array :( i need help

[gon1387]

Hi Techyworld,

I'm quite not sure what kind of retrieval you're after but, I hope this helps.
It geneerates a 2d array, based from given config and generate an html table, and append to html body.

I also have a JSFiddle prepared Here's the link JSFiddle Example

var twoDArrayGenerator,
    generateTable,
    //sets the max rows to 10
    ROW_MAX = 10,
    //sets the max column to 3
    COL_MAX = 3;

//generates a 2d array with a generated content
twoDArrayGenerator = function(){
    var contentCount = 0,
        i,j,
        theArray=[];
    for(i=0; i<ROW_MAX; i++){
        theArray[i] = [];
        for(j=0; j<COL_MAX; j++){
            theArray[i][j] = contentCount++;
        }
    }

    return theArray;
};

//generate a table based from a passed array and append to body 
generateTable = function(theArray){
    var theTable = document.createElement("table"),
        i,j,
        currentRow,currentCol;
    for(i=0; i<ROW_MAX; i++){
        currentRow = theTable.insertRow();
        for(j=0; j<COL_MAX; j++){
            currentCol = currentRow.insertCell();
            currentCol.innerHTML = String(theArray[i][j]);
        }
    }
    theTable.setAttribute("border","1");
    document.body.appendChild(theTable);
};

// Geneerate an array and create a table out from the returned array.
generateTable(twoDArrayGenerator());

[techyworld]

Actually i wont be able to retrieve because its not filling the table!!i need to solve this problem first

[gon1387]

Hi Techyworld,

in yoour drawTable, totalRow wasn't defined as a table and was immediately used as an array. Here's a new ver of your drawTable, and the live sampple in JSFiddle:
JSFiddle Live Code

function drawTable() {
        var div_id = document.getElementById('div1');
        var tbl = document.createElement("table");
        var totalRows = [];

        tbl.setAttribute("id","table_id") ;
        tbl.setAttribute("border","1") ;
        div_id.appendChild(tbl);

        for(var i=0;i<5;i++){
            var row=tbl.insertRow();
                totalRows[i]= new Array();
            for(var j=0;j<10;j++){
                var cell=row.insertCell();
                cell.setAttribute("width","100px") ;
                cell.setAttribute("height","35px") ;
                cell.innerHTML = " "+j;
            }
        }
    }
drawTable();

[techyworld]

Actually i wont be able to retrieve because its not filling the table!!i need to solve this problem first

[gon1387]

Hi techyworld, you repeated the same reply.

Can you please clarify on what context would you like filling the table be? Was it on the function drawTable?

As the function drawTable creates and fills a table. And on that context, if the table you're referring to was the Table created by the function, then your statement, not filling the table should be deemed incorrect. But if you're not refering to the generated table by the function, then on what context are you refering "filling the table" to?

Please be specific and clear with what you want...

[techyworld]

@gon I defined it as global. i didnt put it here. still doesnot fill the array!

[gon1387]

So you just want to clone an array?

[techyworld]

Here is my full code. I think this line :
totalRows[i][j] = document.createTextNode(getRandom(min,max)); , is preventing it from filling the array. Do you know how cani solve this? i need to fill this table with randon numbers operators.

<script type="text/javascript">
    var totalRows = new Array();
    var goodMatches = new Array(10);
    var min =1;
    var max =10;
    var cellText;

    function getRandom(x,y)
        {return Math.floor(Math.random() * (y - x + 1)) + x;}


    function drawTable() {
        var div_id = document.getElementById('div1');
        var tbl = document.createElement("table");
        tbl.setAttribute("id","table_id") ;
        tbl.setAttribute("border","1") ;
        div_id.appendChild(tbl);
        var tabl_id = document.getElementById("table_id");

        for(var i=0;i<10;i++){
            var row=document.createElement('tr');
            totalRows[i]= new Array(10);
            for(var j=0;j<10;j++){
                var cell=document.createElement('td');
                cell.setAttribute("width","100px") ;
                cell.setAttribute("height","35px") ;

                var k = getRandom(0,1000);
                if ((k%2)==0)
                {
                    totalRows[i][j] = document.createTextNode(getRandom(min,max));
                }
                else{
                    var z=getRandom(0,1000);
                    if ((z%2)==0)
                        {totalRows[i][j] = document.createTextNode("+");}
                    else
                        {totalRows[i][j] = document.createTextNode("-");}
                }

                cell.appendChild(totalRows[i][j]);
                row.appendChild(cell);
            }
        tabl_id.appendChild(row);

        generateMatch();

        }
    }

    function generateMatch(){

        var div_id2 = document.getElementById('div2');
        var node= " ";
        for (var i=0;i<10; ++i)
        {
            node = node + totalRows[0][i];
            div_id2.innerHTML = node;

        }

    }

    window.onload=drawTable;
</script>

[gon1387]

What you're doing in your snippet below is you're storing the textNodes in an array. You should treat the array as a pool of DOM text nodes not as a string.

var k = getRandom(0,1000);
if ((k%2)==0){
    totalRows[i][j] = document.createTextNode(getRandom(min,max));
} else{
    var z=getRandom(0,1000);
    if ((z%2)==0){
        totalRows[i][j] = document.createTextNode("+");}
    else{
        totalRows[i][j] = document.createTextNode("-");}
    }
}

What goes wrong is, when you executed this snippet, you're processing a live node and you're expecting it to be a string. totalRows has text node value, so you have to treat it as such

 for (var i=0;i<10; ++i)
        {
            node = node + totalRows[0][i];
            div_id2.innerHTML = node;
        }

Here's how to concatenate the value of the text nodes

 for (var i=0;i<10; ++i)
        {
            node = node + totalRows[0][i].nodeValue;
            div_id2.innerHTML = node;
        }

ALso, here's the JSFiddle code from your posted code, I have already change the node = node + totalRows[0][i] to node = node + totalRows[0][i].nodeValue
JSFiddle Live Code

[techyworld]

Thanks it works.

[techyworld]

the variable node, can i slice it like this : var x = node.slice (0,1); ? it seems its not working.

[gon1387]

Yes, as the node variable is a string in your generateMatch function.
What result have you got?

[techyworld]

it doesnt return anything :(

[techyworld]

ok I manage to do it. I need your help on something else. When i retrieve the first row , for eg i got this :

+ - 2 - + 1 0 3 7 3 4 -

now I want to retrieve every 3 element from this string and push it in a new array. For eg:
retrieve -> + - 2
            - 2 -
            2 - +
            - + 1
            ... It goes on like this. Got an idea how to do it?

[gon1387]

You have to think of it as an array. You can access a string like array.

var str = "0123456789";

// Outputs '5' on the console
console.log(str[5]);

[techyworld]

I try to do this

if (node.match(/^\d{2}[-+]$/))
                        { alert ("true");}
                else
                        {alert("false");}

but it alert undefined! why this?

[gon1387]

Hi Techyworld,

I don't find any problem with the alert message. Irregardless of what boolean value you got you'll recieve "true" or "false" as an alert message. But if you're talking about the node having an undefined value, then the browser will throw an error since undefined is a primitive type and doesn't have a method match. And lastly, if you received a string value of "undefined" you'll see the latter's alert message; which is "false."

Anyway, I belive we already have solved your first query, please mark this solved. And, please create another thread for your future off-topic queries.