In this exercise, you'll use what we've learned about JSON and Ajax to make a video player that fetches the video JSON asynchronously.

  1. Download a fresh copy of json-starter.zip and start from there.
  2. The webpage currently has an in-page JSON describing the videos. Make a file in your project folder called videos.json, and copy the JSON into that file. Delete the JSON from the script.js file.

    Note that when you create your videos.json file you do not need the variable declaration. Just the JSON.

  3. Set up an ajax call to get the data in the videos.json file.
  4. In the success callback, iterate through the videos and render each one onto the page, using the addVideoToList function. Review the earlier slides to remember how to set up the code.

Bonus

Create another JSON file with another set of vidoes, and bring that into the page as well. Try to generalize your code so that you could bring any number of JSON files in.

Tips

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.