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.
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.