An async Exercise using client side XHR accessing the swapi API at https://swapi.co
Remember to commit after each step.
-
Make a
/js
folder and create anapp.js
file in it. -
In the
index.html
file, loadapp.js
via script tags. -
Use live-server to serve up the files to your browser.
-
Construct your XHR requests in the
app.js
file to the following endpoints and retrieve the data specified.the instructions below will mention ids and classes from index.html, study that document
-
Get a Person object from the SWAPI, https://swapi.co/api/people/4/
- fill in
person4Name
with the value of Person'sname
- fill in
person4HomeWorld
with the value of Person'shomeworld
(name)
- fill in
-
Get a Person object from the SWAPI, https://swapi.co/api/people/14/
- fill in
person14Name
with the value of Person'sname
- fill in
person14Species
with the value of Person's (first)species
(name)
- fill in
-
Get a list of all the films from the SWAPI, https://swapi.co/api/films/
- fill in
filmList
with a new<li>
element for eachfilm
- fill in each film's
filmTitle
with the title of thefilm
- create a new
<li>
in this film'sfilmPlanets
for eachplanet
that appeared in thisfilm
- fill in each
planetTitle
with the name of theplanet
- fill in each
- fill in each film's
- fill in
- Slides on Async HTTP Request with XHR: http://slides.com/sgnl/xhr#/
- Documentation on 'XMLHttpRequest' method: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
- Remember that this is a client side excercise which means that all the code will be executed via the browser's javascript runtime, which means that our global context is the 'window' object. Go ahead and type in 'window' in the browser console to inspect the methods on the 'window' object. In there you will find a method named 'XMLHttpRequest' which you will be using for this excercise.