Jquery - change the content of a div class to details of clicked video

Question

I am making video playlist like youtube for my hybrid app. I populate/display the data using each function and append them from json data thrown by the webserver.

I have a sample json data here:

[{"video_id":"1","video_youtube_title":"This is the latest video",
"video_youtube_description":"Discription for the primary video.",
"video_youtube_thumbnail":"https://i.ytimg.com/vi/aVS4W7GZSq0/hqdefault.jpg",
"video_youtube_date_published":"2016-07-15 13:37:00",
"video_youtube_duration":"PT16M15S",
"video_youtube_link":"aVS4W7GZSq0",
"video_fb_link":"example/posts/1715658608683485",
"video_date_added":"2016-07-14 23:45:58"}]
,
[{
"video_id":"2",
"video_youtube_title":"Title 1",
"video_youtube_description":"Description1",
"video_youtube_thumbnail":"https://i.ytimg.com/vi/kPDnw3_1GOI/hqdefault.jpg",
"video_youtube_date_published":"2016-03-07 15:00:00",
"video_youtube_duration":"PT1M16S",
"video_youtube_link":"kPDnw3_1GOI",
"video_fb_link":"example/posts/1666877406894939",
"video_date_added":"2016-03-09 07:00:00"}
,
{
"video_id":"3",
"video_youtube_title":"Title 2",
"video_youtube_description":"Description2",
"video_youtube_thumbnail":"https://i.ytimg.com/vi/dRjE1JwdDLI/hqdefault.jpg",
"video_youtube_date_published":"2016-03-08 16:00:00",
"video_youtube_duration":"PT1M16S",
"video_youtube_link":"dRjE1JwdDLI",
"video_fb_link":"example/posts/1666877406894939",
"video_date_added":"2016-03-09 06:00:00"}]

So the first array is the primary video, the next array are the list video.

Here is my sample code in appending the data on my primary video:

var primary_videolink = (data[1][0].video_youtube_link);
var primary_videodescription = (data[1][0].video_youtube_description);
var primary_videodatepublished = (data[1][0].video_youtube_date_published);
var primary_videotitle = (data[1][0].video_youtube_title);

 $('#primary-video').append('<iframe id="video" width="100%" height="auto"       src="https://www.youtube.com/embed/'+ primary_videolink + '" frameborder="0" allowfullscreen></iframe>'+
    '<div class="primary-video-details-wrap">'+
    '<div class="primary-videotitle"> '+primary_videotitle+' <i class="fa fa-check-square" aria-hidden="true"></i></div>'+
    '<div class="primary-videodatepublished"> Published on '+primary_videodatepublished +'</div>'+         '<div class="primary_videodescription">'+primary_videodescription+'</div>'+            
'</div>'
);

Here is my sample code on appending the data on my video lists:

$.each(data[2], function(i, row) {
  var video_link = row.video_youtube_link;
  var video_img = row.video_youtube_thumbnail;
  var video_title = row.video_youtube_title;
  var video_description = row.video_youtube_description;
  var video_duration = row.video_youtube_duration;
  var video_published = row.video_youtube_date_published;

  var str = "<div class='video-list-wrapper'>";
   str += "<div class='video-wrap'>";
   str += "<div class='left-video-info'><a href=#null onclick=document.getElementById('video').src='http://www.youtube.com/embed/"+video_link+"'><img src="+ video_img +" width='100%' height='auto'></a><span class='video-duration'>"+parseDuration(video_duration)+"</span></div>";                 
   str += "<div class='right-video-info'>";
   str += "<div class='video-title'>"+video_title+"</div>";
   str += "<div class='video-date'>"+ video_published +" ago</div>";
   str += "</div>";//right-info 
   str += "</div>";//video-wrap
   str += '</div>';
  $('#video-list').append(str); 
});

The code works fine and it displays the primary video and the list of video(thumbnails) below of it. When I clicked any of the thumbnails, the primary video will be able to change according to the youtube url that it contains. This is working fine. This is how it looks like.

Added: Jsfiddle https://jsfiddle.net/xkevin/h2hegehv/

My problem now is on how to show the details (video title, description, date etc.) of the video I have clicked. So that the primary video details could be change too*(not only the video)*. Is there a way I can change the details depending on what video I have clicked using jquery? I hope you understand my problem. Thank you!

Edit: I am open for any suggestion on how I can better develop this video playlist or what should I consider to make this things workout. Thanks.

score 1 · Accepted Answer · edited May 23 '17 at 12:14

I have wrote and revise some code as less as possible but achieve what you want , maybe you can have a look :

var video_inf_array = [];
$.each(data[2], function(i, row) {

  var video_link = row.video_youtube_link;
  var video_img = row.video_youtube_thumbnail;
  var video_title = row.video_youtube_title;
  var video_description = row.video_youtube_description;
  var video_duration = row.video_youtube_duration;
  var video_published = row.video_youtube_date_published;

  var all_video_inf = {   // an object to carry one video's all information
    video_link : video_link,
    video_img : video_img ,
    video_title : video_title ,
    video_description : video_description ,
         // ... all key value above ,and maybe u wanna simplify it like 'video_published : row.video_youtube_date_published'
  }

  var str = "<div class='video-list-wrapper'>";
   str += "<div class='video-wrap'>";
   str += "<div class='left-video-info'><a href=#null onclick=\"replace_to_primary("+i+")\"><img src="+ video_img +" width='100%' height='auto'></a><span class='video-duration'>"+parseDuration(video_duration)+"</span></div>";                 
   str += "<div class='right-video-info'>";
   str += "<div class='video-title'>"+video_title+"</div>";
   str += "<div class='video-date'>"+ timeago(date)+" ago</div>";
   str += "</div>";//right-info 
   str += "</div>";//video-wrap
   str += '</div>';
  $('#video-list').append(str);

  video_inf_array.push(all_video_inf);   //push this video's information to an array
});

function replace_to_primary(index){

  $('#video').attr('src',video_inf_array[index].video_link);
  $('.primary-videotitle').text(video_inf_array[index].video_title);
  $('.primary_videodescription').text(video_inf_array[index].video_description);

  // ... handle other information like above pattern .

}

===========================================================================

Sorry for late to provide correct answer , At first , I keep to revise as less as possible , but now I revise a little more to make this clearly There is a saying that using onClick() is a bad practice , here is why.

So I do it with more jquery , the index() api is the key that maybe you wanna look into more =) here is a JSFiddle : https://jsfiddle.net/Carr1005/pusyyen1/2/

Thank you for your answer but I got parseerror when adding the push array on the code. — c.k, Aug 03 '16 at 05:40
uh...could you provide more detailed description ? maybe i could give a help — Carr, Aug 03 '16 at 05:51
oops. its weird, the error now is `video_inf_array` is not defined when i click a thumbnail... — c.k, Aug 03 '16 at 06:06
OK, I 'm sorry about that ,I'll provide a JSFiddle later , I need a little bit time to produce fake data like 'row.video_youtube_description;' — Carr, Aug 03 '16 at 06:15
Why is it that the push array appear as object arrays.. like [Object, Object, Object, Object] — c.k, Aug 03 '16 at 08:15
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/118981/discussion-between-carr-and-c-k). — Carr, Aug 03 '16 at 08:21
I have problem... pls check http://chat.stackoverflow.com/rooms/118981/discussion-between-carr-and-c-k — c.k, Aug 04 '16 at 08:24

Jquery - change the content of a div class to details of clicked video

1 Answers1