Exercise: AJAX

In this exercise, you'll use jQuery's $.ajax function to pull in a JSON data hosted elsewhere on the internet and turn it into DOM, using the same functions as we did for the in-page JSON.

Coding

Go through these steps, and do as many as you can in the time we have:

Start with your solution from the last exercise, or download json_solution.html into your project folder and start from there.
The webpage currently has an in-page JSON describing the videos - delete the variable from the page and all the json.
Use the jQuery $.ajax function to bring in the data from the url https://api.myjson.com/bins/k4o2v. If you click on the link, you will be able to see the JSON itself! Notice that the four videos are nested inside a 'videos' key, which you will have to account for. You will need to access the array of videos so that you can iterate through the videos and render each one into the page, using the addVideoToList function that we already have. Look at the slides and the jQuery documentation to remember how to use the $.ajax function.
Bonus: Create another JSON file with another set of videos, and bring that into the page as well. Try to generalize your code so that you could bring any number of JSON files in.

Make sure that you use your browser developer tools to make debugging easier while working on this. Check for errors, and use console.log() to figure out how far your code makes it, and what the values of your variables are along the way.

View live solution

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Video Watcher</title>
  <link rel="stylesheet" href="http://www.teaching-materials.org/common/css/bootstrap.min.css">
  <style type="text/css">
  /* This puts titles always on a separate line from thumbnails */
  #videos-list img {
    display: block;
  }
  </style>
 </head>
 <body>

<div class="container">

 <div class="row">
   <div class="col-md-12">
    <h2 class="page-header">Best Videos Ever ❤</h2>
   </div>
 </div>

 <div class="row">
   <div class="col-md-3">
     <ul id="videos-list">
    </ul>
   </div>
   <div class="col-md-9" id="video-watcher">
   </div>
 </div>
</div>

<script type="text/javascript" src="http://www.teaching-materials.org/common/youtube.js"></script>
<script type="text/javascript" src="http://www.teaching-materials.org/common/js/jquery.min.js"></script>

 <script>
 function addVideoToList(video) {

    var videoLink = $('<a>');
    videoLink.append(video.title);
    var linkUrl = videoLink.attr('href');
    var thumbnailUrl = youtube.generateThumbnailUrl(video.youtubeId);
    var thumbnailImg = $('<img>');
    thumbnailImg.attr('src', thumbnailUrl);
    videoLink.append(thumbnailImg);

    videoLink.on('click', function(e) {
        e.preventDefault();
        var videoTitle = $('<h2>');
        videoTitle.html(video.title + ' <small>' + video.author + '</small>');
        var videoEmbed = $('<iframe></iframe>');
        videoEmbed.attr('src', youtube.generateEmbedUrl(video.youtubeId));
        videoEmbed.attr('width', 560);
        videoEmbed.attr('height', 315);

        var videoWatcher = $('#video-watcher');
        videoWatcher.hide();
        videoWatcher.empty();
        videoWatcher.append(videoTitle);
        videoWatcher.append(videoEmbed);
        videoWatcher.fadeIn();
    });

    var videoItem = $('<li>');
    videoItem.append(videoLink);
    $('#videos-list').append(videoItem);
 }

$.ajax({type: "GET",
  url: "https://api.myjson.com/bins/k4o2v",
  dataType: "json",
  success: function(response) {
    var videos = response.videos
    for (var i = 0; i < videos.length; i++) {
      addVideoToList(videos[i]);
    }
 }
});


 </script>
 </body>
</html>