1 of 15

Working with APIs

Prof V

2 of 15

Working with APIs

  1. Read the documentation
  2. Does it do what you want/need it to do?
  3. Request API keys
  4. Test your connection with a simple request
  5. Get familiar with the response formatting
  6. Perform desired task

3 of 15

Example: A RESTful API — NYTimes

4 of 15

4

5 of 15

5

Give the URL to reach the API. Should include the key needed to access it, your query, and any necessary parameters.

6 of 15

6

fetch() returns a promise. A promise may or may not be resolved. If a promise is resolved, then whatever is in then() will be executed-- this will also be a promise because it may or may not be executed based on whether the original promised gets resolved or not.

fetch() returns a promise. A promise may or may not be resolved. If a promise is resolved, then whatever is in then() will be executed-- this will also be a promise because it may or may not be executed based on whether the original promised gets resolved or not.

7 of 15

7

We need to return the JSON version of our results so we can pass it to our display function and access the fields more easily

We need to return the JSON version of our results so we can pass it to our display function and access the fields more easily

We need to return the JSON version of our results so we can pass it to our display function and access the fields more easily

8 of 15

8

This example wants exactly 10 articles returned

​

(remember: we want up to 15)

This example wants exactly 10 articles returned, otherwise it won’t display anything. If no results are found, it tells the user through the HTML

9 of 15

9

Once we have the results, we create the appropriate HTML elements

10 of 15

10

We then populate our newly created HTML elements with the info from the response JSON

Once we have the results, we create the appropriate HTML elements

11 of 15

11

And lastly, we append our newly created and recently populated HTML elements to our webpage

12 of 15

Unit Exercise

Let’s make a dynamic image gallery by using an image API!

13 of 15

Unit Exercise Prep Steps

  1. Make sure you understand the example from “An approach for using third-party APIs”
    • This will make the lab much easier
  2. Create an account with Unsplash Developers
  3. Click on “Your Apps” then “New Application” and follow the steps
  4. When done, click on your new application’s name in “Your Apps”, scroll to the bottom, and copy down the “Access Key”
    • This is the key you’ll put in to test your code
  5. Do not apply for production

13

14 of 15

Unit Exercise Helpful Hints

  • Make sure you understand the example from “An approach for using third-party APIs”
  • Make sure you read and understand the JS code that’s already on the JSFiddle
  • Follow the comments exactly for the code you write
    • Code should look familiar (hint hint)
  • For debugging, do a console.log of the json response and/or the JSON fields you’re working with

14

15 of 15

API Tutorial Videos