Position in array is undefined, sometimes.

Hi everybody,

I'm creating a menu system by loading data from a database, store the data in arrays and creating menu items (via createView) from the arrays.

My database has 11 columns, and 100 rows, and I store every row input in an column based array, e.g: column 1 (type), row 1 input = cheese, array = typeData, So the type 'cheese' is stored into typeData. This done for every column and every row.

All the arrays are made gobal, so I can acces them throughout the app. I also have 6 separate arrays which each populated based on items added by type.:

A part of my function which loads data from my database, in alloy.js:

for(pos = 0; pos < json.length; pos++){
    typeData.push(json[pos].type);
    thumbData.push(json[pos].thumb);
    nameData.push(json[pos].name);
    summaryData.push(json[pos].summary);
    // this is not all which is loaded.
 
    buttonData = {
        thumb:json[pos].thumb,
        name:json[pos].name,
        summary:json[pos].summary,
        link:pos
    };
 
    if (typeData[pos] == "cheese") {
        cheeseData.push(buttonData);
        }else if (typeData[pos] == "meat"){
        meatData.push(buttonData);
        }else.... etc etc...
    }
}

When a menu button is pressed, a new window is created and based on the pressed button, an array is passed to the function below so a that menu can be created.

My function which loads the button data and creates the buttons, in index.js:

function createMenu(array){
    var menuWindow = Titanium.UI.createWindow({  
        navBarHidden:true
    });
 
    for (var i=0; i < array.length; i++) { 
        // array[i].link is the position of the tapped button in the database
        var positionInArray = array[i].link;
 
        productButtons[i] = Titanium.UI.createView({
            link:positionInArray,
            width:"100%",
            height:"90",
            top:90*i,
            backgroundImage:"/images/menu/itemBackground.png",
            backgroundSelectedImage:"/images/menu/itemBackground-over.png"
        });
        // Shows all the links of all buttons
        Ti.API.log(productButtons[i].link + " = the link of button");
 
        //
        // Somewhere in this function, links become undefined
        //
        productButtons[i].addEventListener('singletap', function(e){    
            var productLocation = {link:e.source.link};
            Ti.API.log(e.source.link + " = the link of the source");
            Ti.API.log(productLocation.link + " = the link received in eventListener");
            var productScrn = Alloy.createController('product',productLocation).getView();
            productScrn.open();
        });
 
        productScroll.add(productButtons[i]);
        }
 
     menuWindow.add(productScroll);
    menuWindow.open();
}

When the productScrn.open(); is called, a new menu opens and the data stored in the arrays before is displayed on screen.

My problem is the following: everything works until I press a button created in the createMenu(); function, the event listener is fired but sometimes the productScrn does not display the information. I receive the logs i've placed in tmy console, but they return 'undefined' or a number (which is correct).

I've noticed that when the productScrn isn't displaying information, backgroundSelectedImage (in my index.js) also does not work. Is there to much info in the buttons that it sometimes cannot get the .link atribute?

Cheers!