how do you call two functions for youtube api v3

HI,

I am working with Youtube's API and I want to pull in two sets of videos.

One that is a bigger thumbnail with the description and the other with three small thumbnails.

I can do one or the other right now. (i'm thinking that whatever is the last called is getting displayed)
Here is what i have so far

Thanks!

      <script type="text/javascript">
      pid_three = '';
      $(document).ready(function(){
        $.get(
          "https://www.googleapis.com/youtube/v3/channels", {
            part: 'contentDetails',
            forUsername: 'doctorscompany',
            key: 'AIzaSyB7oqNYxEGnskHEpKHSCbIH_-VI4_sJkzg'
          },
        function(data_three){
          $.each(data_three.items, function(i_three, item)  {
          
       
            pid_three = item.contentDetails.relatedPlaylists.uploads;
            getVids(pid_three);
          })
        });

      });
      function getVids(pid_three){
        var data_three = {
          part: 'snippet',
          maxResults: 3,
          playlistId: pid_three,
          key: 'AIzaSyB7oqNYxEGnskHEpKHSCbIH_-VI4_sJkzg'
        }

        $.get(
          "https://www.googleapis.com/youtube/v3/playlistItems", data_three, function(data_three){
            var output_three;

            $('#results_three').html("");
          $.each(data_three.items, function(i_three, item){
            
              videoTitle_three = item.snippet.title;
              vidDesc_three = item.snippet.description;
              rvideoID_three = item.snippet.resourceId.videoId;
				vidThumburl_three = item.snippet.thumbnails.high.url;
			 
				output_three = '<a class="videos2" href="https://www.youtube.com/watch?v=' + rvideoID_three + '"><img style="width:225px; float:left;" src="'+vidThumburl_three+'"></a>';
			
              //Append to results list
              $('#results_three').append(output_three);
            });
          });
      }
    </script>


<div id="results"  class="videos2" style="width:900px; margin-right:20px; position:relative;">
</div>
 <br/><br/><br/>

<div id="results_three"  class="videos2" style="width:900px; position:relative;">
</div>

Open in new window

smfmetro10Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
What is your intention here?

You have two div's in your sample markup but you are only targeting one - is your intention to send the results from the first call to the one and the second to the other?
0
smfmetro10Author Commented:
Yes- absolutely. Thanks!
0
Julian HansenCommented:
Ok, help me out here - you say you can do one or the other - the code you posted is pulling in and displaying the three thumbnails - where is the other link?

The channels request returns 1 item

From that you pull the relatedPlaylists.uploads and pass that to the get_vids

That calls the playlist items with the id you captured above.

This returns 3 items - which you then display.

Not sure I see the problem?
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

smfmetro10Author Commented:
Ha! I'm sorry. I forgot to add half of the code!

Lets start over. Here is the complete code. sorry about that.

So I would like to display one  large thumbnail and three small thumbnails underneath that. I thought about doing it all in one function with a loop but I need to have pagination as well and when the user clicks the "next page" i only want more of the small thumbnails to appear (Not have one big and three small)

Here is ALL the code.. Thanks again

  <!-- Three small thumbnails -->
   
      <script type="text/javascript">
      pid_three = '';
      $(document).ready(function(){
        $.get(
          "https://www.googleapis.com/youtube/v3/channels", {
            part: 'contentDetails',
            forUsername: 'doctorscompany',
            key: 'AIzaSyB7oqNYxEGnskHEpKHSCbIH_-VI4_sJkzg'
          },
        function(data_three){
          $.each(data_three.items, function(i_three, item)  {
          
       
            pid_three = item.contentDetails.relatedPlaylists.uploads;
            getVids(pid_three);
          })
        });

      });
      function getVids(pid_three){
        var data_three = {
          part: 'snippet',
          maxResults: 3,
          playlistId: pid_three,
          key: 'AIzaSyB7oqNYxEGnskHEpKHSCbIH_-VI4_sJkzg'
        }

        $.get(
          "https://www.googleapis.com/youtube/v3/playlistItems", data_three, function(data_three){
            var output_three;

            $('#results_three').html("");
          $.each(data_three.items, function(i_three, item){
            
              videoTitle_three = item.snippet.title;
              vidDesc_three = item.snippet.description;
              rvideoID_three = item.snippet.resourceId.videoId;
				vidThumburl_three = item.snippet.thumbnails.high.url;
			 
				output_three = '<a class="videos2" href="https://www.youtube.com/watch?v=' + rvideoID_three + '"><img style="width:225px; float:left;" src="'+vidThumburl_three+'"></a>';
			
              //Append to results list
              $('#results_three').append(output_three);
            });
          });
      }
    </script>
  
  
  
 <!-- ONE Thumbnail and Description 400 px -->
 
   <script type="text/javascript">
      pid = '';
      $(document).ready(function(){
        $.get(
          "https://www.googleapis.com/youtube/v3/channels", {
            part: 'contentDetails',
            forUsername: 'doctorscompany',
            key: 'AIzaSyB7oqNYxEGnskHEpKHSCbIH_-VI4_sJkzg'
          },
        function(data){
          $.each(data.items, function(i, item)  {
          
       
            pid = item.contentDetails.relatedPlaylists.uploads;
            getVids(pid);
          })
        });

      });
      function getVids(pid){
        var data = {
          part: 'snippet',
          maxResults: 1,
          playlistId: pid,
          key: 'AIzaSyB7oqNYxEGnskHEpKHSCbIH_-VI4_sJkzg'
        }

        $.get(
          "https://www.googleapis.com/youtube/v3/playlistItems", data, function(data){
            var output;

            $('#results').html("");
          $.each(data.items, function(i, item){
            
              videoTitle = item.snippet.title;
              vidDesc = item.snippet.description;
              rvideoID = item.snippet.resourceId.videoId;
				vidThumburl = item.snippet.thumbnails.high.url;
			 
				output = '<a class="videos2" href="https://www.youtube.com/watch?v=' + rvideoID + '"><img style="width:400px; float:left;" src="'+vidThumburl+'"></a>';
			
              //Append to results list
              $('#results').append(output);
            });
          });
      }
    </script> 




<div id="results"  class="videos2" style="width:900px; margin-right:20px; position:relative;">
</div>
 <br/><br/><br/>

<div id="results_three"  class="videos2" style="width:900px; position:relative;">
</div>

Open in new window

0
Julian HansenCommented:
The problem is this

You have defined two functions with the same name (getVids) - so that is a big problem right there.

In the one you load the one div and the other a different div so obviously only one div will be populated - as only one version of the function will be visible to the sub-sytem.

A quick (and very dirty fix) is to change the second get_vids to get_vids2 (or something) - makes for very ugly coding but it will work.

Lets look at what is different between the two get_vids
1. Target div (results vs results_three)
2. Width of image (225 vs 400)
3. Max number of items to retrieve

We can solve the width story with styling - so take that out of the function.
The remaining two items we can solve by adding some parameters to get_vids.
Here is something to get you started
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
pid_three = '';
$(document).ready(function(){
  $.get(
    "https://www.googleapis.com/youtube/v3/channels", {
      part: 'contentDetails',
      forUsername: 'doctorscompany',
      key: 'AIzaSyB7oqNYxEGnskHEpKHSCbIH_-VI4_sJkzg'
    },
    function(data_three){
      $.each(data_three.items, function(i_three, item)  {
        pid_three = item.contentDetails.relatedPlaylists.uploads;
		// We use one getVids call with parameters
        getVids(pid_three, 3, '#results_three');
      })
    }
  );
  $.get(
    "https://www.googleapis.com/youtube/v3/channels", {
      part: 'contentDetails',
      forUsername: 'doctorscompany',
      key: 'AIzaSyB7oqNYxEGnskHEpKHSCbIH_-VI4_sJkzg'
    },
    function(data){
      $.each(data.items, function(i, item)  {
        pid = item.contentDetails.relatedPlaylists.uploads;
		// We use one getVids call with parameters
        getVids(pid, 1, '#results');
      })
    }
  );
});
    
    
function getVids(pid_three, maxResults, id){
  var data_three = {
    part: 'snippet',
    maxResults: maxResults,
    playlistId: pid_three,
    key: 'AIzaSyB7oqNYxEGnskHEpKHSCbIH_-VI4_sJkzg'
  }

  $.get(
    "https://www.googleapis.com/youtube/v3/playlistItems", data_three, function(data_three){
      var output_three;
      $(id).html("");
      $.each(data_three.items, function(i_three, item){

        videoTitle_three = item.snippet.title;
        vidDesc_three = item.snippet.description;
        rvideoID_three = item.snippet.resourceId.videoId;
        vidThumburl_three = item.snippet.thumbnails.high.url;

        output_three = '<a class="videos2" href="https://www.youtube.com/watch?v=' + rvideoID_three + '"><img style="float:left;" src="'+vidThumburl_three+'"></a>';

        //Append to results list
        $(id).append(output_three);
      });
    }
  );
}
</script>
 <!-- ONE Thumbnail and Description 400 px -->
<style type="text/css">
#results img {
  width: 400px;
}
#results_three img {
  width: 225px;
}
</style> 
</head>
<body>
<div id="results"  class="videos2" style="width:900px; margin-right:20px; position:relative;">
</div>
<br/><br/><br/>
<div id="results_three"  class="videos2" style="width:900px; position:relative;">
</div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
smfmetro10Author Commented:
Thank you!
  Out of curiosity why would changing the getvids to getvids_2 be considered ugly coding?
0
Julian HansenCommented:
You are welcome,

In answer to your question:

Because you are repeating functionality that could be done in a single function. Both versions essentially do the same thing - to write separate functions for them is not good practice.

If at a later stage you want to change the way the links are output - you have to change it in two places - if you want to add a third div you now have to write a third function etc.
0
smfmetro10Author Commented:
Ah. Thanks. In the end I need to put pagination in. But I need only the div with the three thumbnails to scroll through the channel's videos. (maybe with ajax?)

Thanks again for the help!!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.