Your goal with this assignment is to use AJAX to update a webpage with information from a "database". (The "database" in this case is just some hard-coded JSON information in the /api file.)
You are provided with a static view that shows what information you'll need to display from the API. You must run this site from a server for AJAX to work properly. Once you're doing that, visit the index.html page to see what you're working with.
The page you'll see has placeholder content in it. Your task is to access /api with AJAX to replace the placeholder content with real data.
So the page will load, there might be a moment's wait while /api is accessed... And then right before the user's eyes, the content on the page will change to real values, as the response from /api is received.
Alter the HTML as needed to make it easier for you to select elements in the DOM.
Note: You will need to be running a local server for the AJAX call to work. You could put together a quick Sinatra application, but I suggest just running php -S localhost:8080 from your project's root folder. That'll enable you to visit http://localhost:8080 and http://localhost:8080/api, which is enough for this assignment.
- Practice using AJAX to receive complex JSON responses
- Practice updating the DOM based on information from an a JSON response
- Deepen knowledge of JavaScript data structures like arrays and key-value pairs (a.k.a. "objects")