Javascript 2D array

Question

Hi Gurus, I am trying to use 2 dimensional array in javascript for storing strings. But I am not able to get the values correctly. Below is my code.

      var commentstore=new Array();
        function creating(id,day)
        {
            if(commentstore[day,id] != null)
         {
             alert("It already exists: commentstore["+day+"]["+id+"]"+commentstore[day,id] );
             var textinput="<div id='closeit'>Comments:<input type='text' name='comm["+day+"]  ["+id+"]' value='"+commentstore[day,id]+"'/></div>
                               <div id='closing' onclick='closecomment("+id+","+day+")'>:)</div>";
         }
            else
            {
                var textinput="<div id='closeit'>Comments:<input type='text' name='comm["+day+"]  ["+id+"]' /></div>
                               <div id='closing' onclick='closecomment("+id+","+day+")'>:)</div>";  
                $('#comm').html(textinput);
            }

    function closecomment(id,day)
    {
        comm.style.visibility='hidden';
        var str='comm['+day+']['+id+']';
        var element = document.getElementById(str);
     if(element.value !=null)
     {
      commentstore[day,id]=element.value;
      alert('New values stored: commentstore['+day+']['+id+']'+commentstore[day,id]);
     }
    }

So in the above code if commentstore[0,0]='man' then commentstore[1,0] and [2,0] and [3,0] ....[7,0] are also filled with 'man'. Same thing is happening with commentstore[0,1] even commentstore[4,1] scenarios. Can any one please provide any tutorial or sample code where we can dynamically create javascript 2d arrays. Thanks in advance.

Answer 1

Replace commentstore[day,id] with commentstore[day][id]. That's the syntax for multi-dimensional arrays.

Answer 2

Use commentstore[0][0] instead of commentstore[0,0]. Also, use strict comparaison whenever loose comparaison is not needed:

var commentstore = [];

function creating(id,day)
{
    if(commentstore[day] === undefined) commentstore[day] = [];
    if(commentstore[day][id] !== undefined)
    {
        alert("It already exists: commentstore["+day+"]["+id+"]"+commentstore[day][id] );
        var textinput="<div id='closeit'>Comments:<input type='text' name='comm["+day+"]  ["+id+"]' value='"+commentstore[day][id]+"'/></div>
                       <div id='closing' onclick='closecomment("+id+","+day+")'>:)</div>";
    }
    else
    {
        var textinput="<div id='closeit'>Comments:<input type='text' name='comm["+day+"]  ["+id+"]' /></div>
                       <div id='closing' onclick='closecomment("+id+","+day+")'>:)</div>";  
        $('#comm').html(textinput);
    }

function closecomment(id,day)
{
    comm.style.visibility='hidden';
    var element = document.getElementById(str);
    if(element.value !== '')
    {
        commentstore[day][id]=element.value;
        alert('New values stored: commentstore['+day+']['+id+']'+commentstore[day][id]);
    }
}

edit: in the original code, str is undefined and the execution fails. You can fix it in closecomment with:

var element = $('#closeit > input').eq(0);

Answer 3

JavaScript only supports arrays with a single index but the index can be anything, so if you really want two dimensional arrays, do this:

commentstore[day+','+id] = ...

i.e. use a string with to components as the key.