Search jQuery

jQuery Forum

Using jQuery

Glenn1111..

appending code from two functions jquery

in Using jQuery • 7 years ago

hi
to start here is a copy of my code

var userid ='UCLdin3PebPaIVQdIC7Lp-kg';
var devkey ='*****************';

$(document).ready(function(){
$.get(
"https://www.googleapis.com/youtube/v3/channels",{
part: 'contentDetails',
id: userid,
key: devkey},
function(data){
$.each(data.items, function(i, item){
pid = item.contentDetails.relatedPlaylists.uploads;
getVids(pid);
})
}
);

function getVids(pid){
$.get(
"https://www.googleapis.com/youtube/v3/playlistItems",{
part: 'snippet',
playlistId: pid,
key: devkey},
function(data){
$.each(data.items, function(i, item){
videoTitle = item.snippet.title;
videoid = item.snippet.resourceId.videoId;
getdur(videoid);
videoimg = item.snippet.thumbnails.maxres.url;
videodesc = item.snippet.description;

var name ='<h4 class="modal-title">'+videoTitle+'</h4>';
var thumb ='<div class="ctr col-md-3 col-xs-12 ythumb"><a data-toggle="modal" href="#'+videoid+'"><img class="img-responsive" src="'+videoimg+'"></a></div>';
var desc ='<div>'+videodesc+'</div>';
var video ='<iframe src\"//www.youtube.com/embed/'+videoid+'\"></>';

})
}
);
}
function getdur(videoid){
$.get(
"https://www.googleapis.com/youtube/v3/videos", {
part:'contentDetails',
id: videoid,
key: devkey},
function(data){
$.each(data.items, function(i, item){
videodur = item.contentDetails.duration;
videolength = videodur.replace("PT","").replace("H",":").replace("M",":").replace("S","");

var Duration ='<div id="length" class="ytime header cat_bar"><h3 class="catbg">'+videolength+'</h3></div>';

thumblen ='<div class="col-md-3 col-xs-12 pad-5"><div class="ctr col-md-3 col-md-12 ythumb"><a data-toggle="modal" href="#'+videoid+'"><img class="img-responsive" src="'+videoimg+'"></a></div><div id="length" class="ytime header cat_bar"><h3 class="catbg">'+videolength+'</h3></div></div>'
$('#thumb-len').append(thumblen);
})
}
);
}
});

and what I'm trying to do is get the image from var thumb and var duration and output them both in the same div

here is how i was planning it to work:
https://jsfiddle.net/wpqfm891/3/

here is what i'm currently getting
http://beta.mdl-palissy.fr/youtube.php

may i also add the this will be done using bootstrap (I'll modify the codes to get the correct classes from he css)
for info (as written in the code) the image will be in a link (the duration also would be a bonus), this link will be linked to a modal that will show when the link is clicked like this
http://jsfiddle.net/xK24S/61/

is there a way i could possibly do that ?
cause at the moment it isn't really working

any help would be much appreciated
surely this can't be that hard to do ...

Replies(6)

kbwood.au

Re: appending code from two functions jquery

7 years ago

Pass the div you're building in getVids to the getdur call and use that reference to append the duration to.

Glenn1111..

Re: Re: appending code from two functions jquery

7 years ago

thanks for your answer.

sorry but i don't exactly see what you mean (i'm new to this)

could you give me an example (not necessarily with my code)

Glenn1111..

Re: appending code from two functions jquery

7 years ago

i've tried one or two things

here is a copy of the code (after modifications)

var userid ='UCLdin3PebPaIVQdIC7Lp-kg';
var devkey ='AIzaSyAG41hRTUTSUsHMdVoliTkwpIDw4RuUp9A';


$(document).ready(function(){
    $.get(
        "https://www.googleapis.com/youtube/v3/channels",{
            part: 'contentDetails',
            id: userid,
            key: devkey},
            function(data){
                $.each(data.items, function(i, item){
                    pid = item.contentDetails.relatedPlaylists.uploads;
                    getVids(pid);
                 })
            }
    );

    function getVids(pid){
        $.get(
            "https://www.googleapis.com/youtube/v3/playlistItems",{
                part: 'snippet',
                playlistId: pid,
                key: devkey},
            function(data){
                $.each(data.items, function(i, item){
                    videoTitle = item.snippet.title;
                    videoid = item.snippet.resourceId.videoId;
                    getdur(videoid);
                    videoimg = item.snippet.thumbnails.maxres.url;
                    videodesc = item.snippet.description;





                })
            }
        );
    }
    function getdur(videoid){
        $.get(
            "https://www.googleapis.com/youtube/v3/videos", {
                part:'contentDetails',
                id: videoid,
                key: devkey},
            function(data){
                $.each(data.items, function(i, item){
                    videodur = item.contentDetails.duration;
                    videolength = videodur.replace("PT","").replace("H",":").replace("M",":").replace("S","");

                    Duration ='<div id="length" class="ytime header cat_bar"><h3 class="catbg">'+videolength+'</h3></div>';
                    name ='<h4 class="modal-title">'+videoTitle+'</h4>';
                    thumb ='<div class="ctr col-md-3 col-xs-12 ythumb"><a data-toggle="modal" href="#'+videoid+'"><img class="img-responsive" src="'+videoimg+'"></a></div>';
                    desc ='<div>'+videodesc+'</div>';
                    video ='<iframe src\"//www.youtube.com/embed/'+videoid+'\"></>';

                     thumblen ='<div class="col-md-3 col-xs-12 pad-5"><div class="ctr col-md-12 col-md-12 ythumb"><a data-toggle="modal" href="#'+videoid+'"><img class="img-responsive" src="'+videoimg+'"></a></div><div id="length" class="ytime header cat_bar"><h3 class="catbg">'+videolength+'</h3></div></div>'
                    $('#thumb-len').append(thumblen);
                })
            }
        );
    }
});