Appcelerator Titanium: Using eventListener & fireEvent on Database Array on View - arrays

Question

I'm new to titanium. I've been having some problems on this for a while now. Help would be greatly appreciated.
I have a array loop that cycles through a database to retrieve images and labels. These are all stored in a view. I am adding an event listener to the the view and then adding fire event to the listener to open the selected image in a new window with the id of that video acting as a reference point to play the selected video in the new window. Hope my code makes more sense.
The problem is that the even listener will only return the value of the last row in the database, not the info of the video image that the user clicks on
function getChannelVideos(){
// create an empty data array
var video = [];
// create the httpRequest
var xhr = Titanium.Network.createHTTPClient();
xhr.open('GET','getVideoFeed.php?chid='+channelView.channelId);
// this method will be called when the request is complete
xhr.onload = function()
{
// parse json coming from the server
var json = JSON.parse(this.responseText);
// if Channel Videos are returned
if(json.channelVideos)
{
for (var i = 0; i < json.channelVideos.length; i++){
var video = Ti.UI.createView({ // creates video view
width:'60%', // sets height
backgroundColor: 'transparent',
});
var videoThumb = Ti.UI.createImageView({ // creates thumb
image:json.channelVideos[i].vThumb,
width:'100%', // sets height
top:150 + i*200, // positions from top
backgroundColor: '#000'
});
video.add(videoThumb); // adds thumb to video view
var videoTitle = Ti.UI.createLabel({ // creates label
text:json.channelVideos[i].vTitle,
font:{
fontSize:12
},
color:'#fff',
backgroundColor:'#000',
textAlign:'center',
width:'100%',
height:20,
top:140 + i*200, // positions from top
});
video.add(videoTitle); // adds video title to video view
var videoSpeaker = Ti.UI.createLabel({ // creates Label
text:json.channelVideos[i].vSpeaker,
font:{
fontSize:12
},
color:'#fff',
backgroundColor:'#000',
textAlign:'center',
width:'100%',
height:20,
top:295 + i*200, // positions from top
});
video.add(videoSpeaker); // adds speaker name to video view
var videoPlay = Ti.UI.createImageView({
image:'/images/light_play.png',
top:215 + i*200, // positions from top
});
video.add(videoPlay); // adds playbutton to videoview
chContentAreaView.add(video); // adds video view to scrollview
var vId=json.channelVideos[i].vId;
video.vId = vId; // Here vId is custom property of video
video.addEventListener('click', function(e){
alert(e.source.vId);
Ti.App.fireEvent('videoPlay',{
videoId:e.source.vId
});
});
}
}
};
// this method will be called if there is an error
xhr.onerror = function(){
alert(this.error + ': ' + this.statusText);
return false;
};
// open the httpRequest
xhr.setRequestHeader("contentType","application/json; charset=utf-8");
xhr.send();
}

Answer 1

try some things:
give video.vId = json.channelVideos[i].vId directly in the property of video like :
var video = Ti.UI.createView({ // creates video view
width:'60%', // sets height
backgroundColor: 'transparent',
vId : json.channelVideos[i].vId
});
use property touchEnabled : false in other views and labels for videoThumb, videoTitle, videoSpeaker, videoPlay etc.
I think by doing this all things will work fine.