How to convert a var[] into a bidimensional var

Question

It is a very complicated and convoluted to explain, anyway, I'll try to explain my problem. I've the following script in a JSP page:

<script>
     var matrix = [];
     <% String lengthStr = (configuration.getLength())+(configuration.getWidth());

     //configuration is an object that is passed as a parameter to the JSP, including information about the size.

     int length = Integer.parseInt(lengthStr); %>
     for (var i = 0; i < <%= length %>; i++) {
        matrix.push(0);
     }
     // set the hidden field on init
     $('#matrix').val(JSON.stringify(matrix));
     $('input[type="button"]').on('click', function(evt) {
                    var me = $(this);
                    var idx = +me.attr('id'); // the + sign turns this value to a number
                    if (matrix[idx] === 0) {
                        matrix[idx] = 1;
                        me.addClass('AreaBlocked');
                    } else {
                        matrix[idx] = 0;
                        me.removeClass('AreaBlocked');
                    }
                // update the hidden field every time a user clicks something
                $('#matrix').val(JSON.stringify(matrix));
      });
</script>

This script creates a one-dimensional vector, which associates for each position the id of a button. Each time a button is pressed, it changes color and the value of the location (in the array "matrix") corresponding to the button is changed. If the button is pressed again, it is restored.

This is the part relating to the generation of buttons:

<table>
                <%
                    int length= Integer.parseInt(configuration.getLength());
                    int width= Integer.parseInt(configuration.getWidth());

                   for(int i = 1; i <= length; i++){

                       String iChar = Integer.toString(i);
                       %>
                       <tr>
                       <%    
                       for(int j = 1; j <= width; j++){
                           String jChar = Integer.toString(j);
                           String idChar = iChar+jChar;
                       %>
                       <td><input type="button" class="AreaFree" id="<%=idChar %>"></td>
                      <%
                       }
                      %>
                      </tr>
                      <%
                   }
                %>
                </table>

                <br>
                <input type="submit" value="Continue" class="MyButton">
                <input type="hidden" id="matrix" name="matrix" value="" />

Every time you press a button, the value in the "id" location of matrix is changed; when I press the "continue" submit button, the var "matrix" is sent to a servlet and converted into an int [] array with an object Gson. Now the real question is : Could I use a two-dimensional array instead of a one-dimensional vector, maintaining the logic of the algorithm? If possible, could you share me the code with changes necessary for this purpose?

Answer 1

In Javascript Arrays are associative arrays . Meaning they're collection of (key, value) pairs.

so if you define an array mat=[] an then assign it's first element mat[0]=[] it becomes a 2D array with 1 row and 0 columns.

You can add as many rows you need and there's no restriction on rows to be of same length.

Following is the code to get 2D matrix given of given dimensions. convert1Dto2D converts 1D array to 2D array.

function get2DArray(row, col) {
    var mat;
    row = +row;
    col = +col;

    if( isNaN(row) || isNaN(col) || row < 0 || col < 0) {
        mat == undefined;
    }
    if(row == 0) {
    }
    mat = [];
    for(var i = 0; i < row; i++) {
        mat[i] = [];
        mat[i].length = col;
    }

    return mat;
}

function convert1Dto2D(arr, row, col) {
    var mat = get2DArray(row,col);
    var matI = 0; matJ = 0;
    for(var i = 0; i < arr.length; i++) {
        matI = Math.floor(i/col);
        matJ = Math.floor(i%col);
        console.log(i + " : " + matI + " : "+  matJ);
        mat[matI][matJ] = arr[i];
    }
    return mat;
}