How to show details from ArrowDB for individual objects #appcelerator

Question

I have queried from ArrowDB and gotten a list of events, now I want each individual event details when the specific view is clicked. My code as shown below works except that it puts the details from all the queried events on the opened window, and it shows the last queried event at the top.

How can I do this please? My brain just can't fix this.

 Cloud.Events.query(function (e) {
        if (e.success) {
            alert('Success:\n' + 'Count: ' + e.events.length);

            for (var i = 0; i < e.events.length; i++) {
                var event = e.events[i];
                alert('id: ' + event.id + '\n' +
                      'name: ' + event.name + '\n' +
                      'start time: ' + event.start_time);
                var holdview = Ti.UI.createView({
                     backgroundColor: '#d3d3d3',
                     backgroundImage: 'testview.png',
                     width: '85%',
                     height: '85%',
                     top: '5%'
                });

                //adding holdview to a scrollable view

               xperiencesscrollableview.addView(holdview);

               var testlabeltitle = Ti.UI.createLabel({
                    top: '5%',
                    width: '65%',
                    height: '10%',
                    left: '20%',
                    text: event.name
               }); 
               //it works well to this point and shows each event separately on views
               holdview.add(testlabeltitle);
       //adding forEach as suggested as an answer            
               e.events.forEach(function(event) {
        holdview.addEventListener('click',function(e){

            var detailstestname = Ti.UI.createLabel({
        top: '5%',
        width: '65%',
        height: '10%',
        left: '20%',
        text: event.name,
        color: 'black',
        backgroundColor: 'white'
        }); 
       //Page for event details
        eventdetailspage.open();
        eventdetailspage.add(detailstestname);
        });
 });    
               //at this point it messes up
            }
         }
     });

Answer 1

The problem lies in that you are using a for-loop whose code block does not have its own scope. The event.name you use for the detailstestname label will always be the event of the last loop by the time the loop has finished and the click event is handled.

You could either use a closure:

for (var i = 0; i < e.events.length; i++) {
  (function(event) {
    ..
  })(e.events[i]);
}

Or use .forEach():

e.events.forEach(function(event) {
  ..
});