dynamically load data from javascript object on click

1. You're listening to click on .video img each time in the loop, it means the earlier the video is attached, the more times it'll trigger the function.

2. When the loop is end, the obj is point to the last element in the array, so all of the click will just alert the last video Object, you have to create a function and pass the object so the function can keep the obj for you.

By this way, you can bind the obj to the created element, and you don't have to set all the format on div one by one.

var videos = $('#videos');
var modalContent = $('#insert-here');

var appendVideo = function(videoObj) {
    var poster = videoObj.poster;
    // Create the video element first, as we're going to listen to its img's click event.
    var video = $('<div class="video"><img src="' + poster + '" data-title="' + videoObj.title + '"/></div>');
    videos.append(video);
    video.find('img').click(function(e) {
        // Now you can access any of the type
        // like videoObj.srcWebm ... etc
        alert(videoObj.srcMp4);
        console(videoObj.srcMp4);
    });
};

for (var i = 0; i < dataCollection.videoData.length; i++) {
  var obj = dataCollection.videoData[i];
    appendVideo(obj);
}

See jsfiddle

1. Move your event assignment outside of the loop - you're assigning the event multiple times to all elements matching your selector.

2. Inside your event handler, you can use the clicked item's data to display the correct video.

Updated code:

var dataCollection = {
    'videoData': [...]
};

$(function() {
  var videos = $('#videos');
  var modalContent = $('#insert-here');

  for (var i = 0; i < dataCollection.videoData.length; i++) {
    var obj = dataCollection.videoData[i];
    // variable for poster image
    var video = obj.poster;
    videos.append('<div class="video"><img src="' + obj.poster + '" data-title="' + obj.title + '" data-srcMp4="' + obj.srcMp4 + '" /></div>');

  }

  $('.video img').click(function(){
    modalContent.empty().append('<video src="' + $(this).data().srcmp4 + '"></video>');
  });

});

JSFiddle: https://jsfiddle.net/mc939cqt/

The problem is in your loop. Your click event is triggered inside the loop. So it is overridden every time when the loop reaches the next image. I've updated your fiddle. By adding extra changes to your code. See below,

for (var i = 0; i < dataCollection.videoData.length; i++) {
  var obj = dataCollection.videoData[i];
    // variable for poster image
    var video = obj.poster; 
    videos.append('<div class="video"><img src="' + obj.poster + '" data-title="' + obj.title + '" data-srcmp="'+obj.srcMp4+'"/></div>');

}

 $('.video img').click(function(){
        //modalContent.append('<video src="' + obj.srcMp4 + '"></video>');
        alert($(this).data("srcmp"));
        console.log($(this).data("srcmp"));
    });

fiddle

Remove click event from for loop I had changed code check on below Fiddle:

https://jsfiddle.net/tc6advL3/

for (var i = 0; i < dataCollection.videoData.length; i++) {
var obj = dataCollection.videoData[i];
// variable for poster image
var video = obj.poster; 
videos.append('<div class="video"><img src="' + obj.poster + '" data-title="' + obj.title + '" data-srcMp4="'+obj.srcMp4+'"/>
</div>');

}

$('.video img').click(function(){
    //modalContent.append('<video src="' + obj.srcMp4 + '"></video>');
    alert($(this).attr("data-srcMp4"));
    console.log(obj.srcMp4);
});

Seems like you would need to create a function that iterates through that object given a title.

function getVideoByTitle(dataCollection, title) {
    for (var i = 0; i < dataCollection.videoData.length; i++) {
        var obj = dataCollection.videoData[i];
        if (obj.title == title) {
            //Do whatever you need to do with the data
        }
    }
    //here you should make sure that you handle for a case where there was something wong
}

And you would also need to create the on click event to send the information to that function.

$('.video img').each(function () {
    var $this = $(this);
    $this.on("click", function () {
       getVideoByTitle(dataCollection, $(this).data('title'));
    });
});

I haven't plugged this into your fiddle to test it but I think this idea might get you on the right path.

I think obj variable is not accessible in event body. following code bind object to one element:

$('.video img').data('video', obj);

and access that object by following code:

$('.video img').click(function(){
    //modalContent.append('<video src="' + obj.srcMp4 + '"></video>');
    alert($(this).data('video').srcMp4);
});