I'm building a sample application with YouTube API (v3), that would provide a list of videos based on a search term. The concept is to populate the page using the data from the response.

I have used the client library documented in v3 to access the API, and send my request, however I don't know how to properly navigate through the data provided in the response in order to display the desired elements. The code below shows my script, where I am trying to access and list the title of the videos in the response:

```
 $(function () {
    //FUNCTION TO COLLECT QUERY TERM FROM SEARCH FORM
     var $searchField = $('#search-text');

    $('#mainSearch'). on ('submit', function(e){
        e.preventDefault();
        if ($searchField.val() !== '') { //IF SEARCH FORM IS NOT EMPTY
                var $searchQuery = $searchField.val()+ ' parody'; //PREPARE SEARCH QUERY
                makeRequest($searchQuery);  //PASS SEARCH QUERY TO REQUEST FUNCTION
            }
            else {
                $searchField.focus(); //ADD ERROR CLASS HERE
                $searchField.blur(function (e){
                    //REMOVE ERROR CLASS HERE
            });

        }
    });

    function makeRequest(query){
        var request = gapi.client.youtube.search.list({
            part: 'snippet',
            q: query
        });
        $('.content').empty();
        request.execute(parseResponse);
    }

    function parseResponse(data) {
        $.each(data, function (i, items){
            var $infoDiv = $('<div></div>');
            $infoDiv.append('<p>'+ items.snippet.title +'</p>');
            $('.content').append($infoDiv);
        });
    }

});

//LOAD API CLIENT
function initClient() {
        gapi.client.load('youtube', 'v3');
        gapi.client.setApiKey('AIzaSyARVmOp3tBIA3ZgW6z4DK_-1sMJwulPvps');
}   

```

However my page does get not populated with any data, and I get this error in my console:

> 
> Uncaught TypeError: Cannot read property 'title' of undefined
> 
> 
> 

And here is the markup for my page:

```
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Parrdy Template</title>
    <!--
    <Bootstrap></Bootstrap>-->
    <link href="stylesheets/bootstrap.min.css" rel="stylesheet"/>
    <link href="stylesheets/style.min.css" rel="stylesheet"/>
    <!--
    <HTML5>Shim and Respond.js IE8 support of HTML5 elements and media queries </HTML5>--><!--
    <WARNING>
      <Respond class="js">doesn't work if you view the page via file:// </Respond>
    </WARNING>--><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="header">
        <img src="/images/Logo1_mod.png" width="200">
        <form role="form" id= "mainSearch" class="navbar-form navbar-right pull-right">
          <div class="form-group">
            <input type="text" id="search-text" placeholder="Search" class="form-control">
          </div>
          <button type="submit" id="vid-search" class="btn btn-sm btn-warning">Search</button>
        </form>
      </div>

      {{{body}}}

      <div class="footer">
        <ul class="nav nav-pills pull-left">
            <li><a class="customcolor" href="#">About</a></li>
            <li><a class="customcolor" href="#">Contact Us</a></li>
          </ul>
      </div>
    </div><!--container ends-->
    <!--
    <jQuery>(necessary for Bootstrap's JavaScript plugins) </jQuery>-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><!--
    <Include>all compiled plugins (below), or include individual files as needed</Include>-->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/core1.1.js"></script>
    <script src="https://apis.google.com/js/client.js?onload=initClient" type="text/javascript">
    </script>
  </body>
</html>

```

Any help on how to access the elements correctly from a YouTube API response would be appreciated. Thanks.