Javascript 2D array issue - all elements are a copy of the final entry

Question

Hi there, I'm creating a javascript 2D array from an XML file which I then manipulate and filter as necessary before displaying on the page.

As I loop through the XML records, I manipulate the data a little, build a normal array from it (rowRecord) and then add this array to the 2D array (dataSet). Thing is, I end up with a nice 2D array, but all the records are duplicates of the very last record I'm adding.

Using some alerts I've found that as I add the first record, all is well. I then add the second record and I get a dataSet with 2 records, both of which are record 2. Adding the third results in a dataSet of 3 records, each of them a copy of the third record. This carries on for all 1300 records, resulting in 1300 identical records, all of which are the last record from the XML.

Here is the code:

var rowRecord     = new Array();
var dataSet       = new Array(rowRecord);

function getAjaxTridionInfo() {
   var xmlFilename = 'filename.xml';
   // make ajax call here, create xml object
   xmlData = new Ajax.Request(xmlFilename,{
      method:'get',
      onSuccess: function(transport) {
         var dataObj = transport.responseXML;
         var vRoot   = dataObj.getElementsByTagName('Items')[0];
         for (var i=0; i<vRoot.childNodes.length; i++) {
            if (vRoot.childNodes[i].nodeType == 1) {
               var tridItem = vRoot.childNodes[i];

               rowRecord[0] = tridItem.childNodes[0].firstChild.nodeValue.substring(26);
               rowRecord[1] = tridItem.childNodes[1].firstChild.nodeValue;
               rowRecord[2] = tridItem.childNodes[2].firstChild.nodeValue;
               rowRecord[3] = rowRecord[1]+"/"+rowRecord[2];
               rowRecord[4] = false;
               rowRecord[5] = "n/a";
               rowRecord[6] = "n/a";
               rowRecord[7] = false;
               rowRecord[8] = "n/a";
               rowRecord[9] = "n/a";

               //do some other processing here to determine rowRecord[4] - [9]

               dataSet.push(rowRecord);
               rowCount += 1;
            }
         }
         //call next function here
      },

      onException: function(transport, exception) {
         throw(exception);
         alert('There has been a problem performing the Ajax call');
      }
   }
   );
}

Any help or suggestions would be appreciated.

Answer 1

Move:-

var rowRecord     = new Array();

to just before:-

rowRecord[0] = tridItem.childNodes[0].firstChild.nodeValue.substring(26);

Otherwise you keep re-using the same instance of an array object, overwriting its content on every iteration. All entries in the outer array point to this same single instance of the array.

Answer 2

You should create rowRecord in the function, not outside, so as to make a new array for every row record.

// NO NEED TO DECLARE ROWRECORD HERE...
var dataSet = new Array(); // <- why would we add anything initially?

function getAjaxTridionInfo() {
  // ...
        if (vRoot.childNodes[i].nodeType == 1) {
           var tridItem = vRoot.childNodes[i];

           // IMPORTANT TO MAKE A NEW ARRAY HERE
           var rowRecord = new Array();

           rowRecord[0] = tridItem.childNodes[0].firstChild.nodeValue.substring(26);
           rowRecord[1] = tridItem.childNodes[1].firstChild.nodeValue;
           rowRecord[2] = tridItem.childNodes[2].firstChild.nodeValue;
           rowRecord[3] = rowRecord[1]+"/"+rowRecord[2];
           rowRecord[4] = false;
           rowRecord[5] = "n/a";
           rowRecord[6] = "n/a";
           rowRecord[7] = false;
           rowRecord[8] = "n/a";
           rowRecord[9] = "n/a";

           //do some other processing here to determine rowRecord[4] - [9]

           dataSet.push(rowRecord); // <- PUSHES THE NEW ARRAY
           rowCount += 1;
        }
    // ...
}

Answer 3

Change:

var dataSet       = new Array(rowRecord);

to:

var dataSet       = [];

UPDATE: And move the dataSet declaration as per @AnthonyWJones