Getting Youtube view counts for several videos using APIv3 (jquery)

Question

I'm trying to create a youtube social feed that includes the video, title, description, date, and view count. I've got everything to work except for the last one, view count. I've been able to get the view counts to show up but they are always out of order and I'm lost on how to make them match up to their respective videos. I used this video as an initial tutorial: [https://www.youtube.com/watch?v=jdqsiFw74Jk][1] It got me this far, but now I'm lost again. Here is my code via code pen: [http://codepen.io/ThatsMyJams/pen/EjZWex][2]

here is my html:

<div id="container">
  <h2>Results:</h2>
  <ul id="results"></ul>
</div>

and here is my javascript:

var yourApiKey = 'AIzaSyDpY9FHgp7EvnDr5mGrxWwKgUBtfM8l5PE';

    var channelName = 'GoogleDevelopers';
    var vidCount = 5;
    var vidHeight = 275;
    var vidWidth = 400;

    $(document).ready(function(){
        $.get(
            "https://www.googleapis.com/youtube/v3/channels", {
                part: 'contentDetails',
                forUsername: channelName,
                key: yourApiKey},
            function(data){
                $.each(data.items, function(i, item){
                    console.log(item);
                    playerID = item.contentDetails.relatedPlaylists.uploads;
                    getVids(playerID);
                })
            }
        );
        function getVids() {
            $.get(
                "https://www.googleapis.com/youtube/v3/playlistItems", {
                    part: 'snippet',
                    maxResults: vidCount,
                    playlistId: playerID,
                    key: 'AIzaSyDpY9FHgp7EvnDr5mGrxWwKgUBtfM8l5PE'},
                function(data){
                    var output;
                    $.each(data.items, function(i, item){
                        console.log(item);
                        vidTitle = item.snippet.title;
                        videoID = item.snippet.resourceId.videoId;
                        vidDate = item.snippet.publishedAt;
                        vidDesc = item.snippet.description;      

                        output = '<li>'+vidTitle+'<span class="date">'+vidDate+'</span><p class="description">'+vidDesc+'</p><iframe height="'+vidHeight+'" width ="'+vidWidth+'" src=\"//www.youtube.com/embed/'+videoID+'\"></iframe></li>';

                        //append to results list
                        $('#results').append(output);
                        getViews(videoID[i]);
                    })
                }
            );
        }
        function getViews() {
            $.get(
                "https://www.googleapis.com/youtube/v3/videos", {
                    part: 'statistics',
                    id: videoID,
                    key: 'AIzaSyDpY9FHgp7EvnDr5mGrxWwKgUBtfM8l5PE'},
                function(data){
                    var output2;
                    $.each(data.items, function(i, item){
                        vidViews = item.statistics.viewCount;

                        output2 = '<span class="views">'+vidViews+'</span>'
                        //append to results list
                        $('#results li').each(function() {
                            $(this).append(output2);
                        });
                    })
                }
            );
        }
    });

I just want to get the viewCount for each video and insert it into the html much like I did for the title, date, etc. Any help would be greatly appreciated :)

Answer 1

Here's your modified code. this will display views at the end of each video:

var yourApiKey = 'AIzaSyDpY9FHgp7EvnDr5mGrxWwKgUBtfM8l5PE';

var channelName = 'GoogleDevelopers';
var vidCount = 5;
var vidHeight = 275;
var vidWidth = 400;

$(document).ready(function () {
    $.get(
        "https://www.googleapis.com/youtube/v3/channels", {
            part: 'contentDetails',
            forUsername: channelName,
            key: yourApiKey
        },
        function (data) {
            $.each(data.items, function (i, item) {
                console.log(item);
                playerID = item.contentDetails.relatedPlaylists.uploads;
                getVids(playerID);
            })
        }
    );
    function getVids() {
        $.get(
            "https://www.googleapis.com/youtube/v3/playlistItems", {
                part: 'snippet',
                maxResults: vidCount,
                playlistId: playerID,
                key: 'AIzaSyDpY9FHgp7EvnDr5mGrxWwKgUBtfM8l5PE'
            },
            function (data) {
                var output;
                $.each(data.items, function (i, item) {
                    console.log(item);
                    vidTitle = item.snippet.title;
                    videoID = item.snippet.resourceId.videoId;
                    vidDate = item.snippet.publishedAt;
                    vidDesc = item.snippet.description;
                    var viewCountId = "viewCount" + i;
                    output = '<li>' + vidTitle + '<span class="date">' + vidDate + '</span><p class="description">' + vidDesc + '</p><iframe height="' + vidHeight + '" width ="' + vidWidth
                        + '" src=\"//www.youtube.com/embed/' + videoID + '\"></iframe>"<span id="' + viewCountId + '"></span></li>';

                    //append to results list
                    $('#results').append(output);

                    getViews(viewCountId);



                })
            }
        );
    }
    function getViews(viewCountId) {
        $.get(
            "https://www.googleapis.com/youtube/v3/videos", {
                part: 'statistics',
                id: videoID,
                key: 'AIzaSyDpY9FHgp7EvnDr5mGrxWwKgUBtfM8l5PE'
            },
            function (data) {
                var output2;
                $.each(data.items, function (i, item) {
                    $('#'+viewCountId).text("views=" + item.statistics.viewCount);
                })
            }
        );
    }
});