Application Programming Interface

Responding to Data

Publishing on the web enables us to interact, not only with browser conditions and user input, but data available on other areas of the internet.

In today’s exercise, we will be diving into the json file format, how to access it, and how to use that data in your webpages. Review the notes on APIs and check out this week’s demo code (in-class-demos/week10 folder).

We will create a webpage that adds structured data into a website.

1. Organize / Select your data source

• This could be your own data for Project 4: set up a table in an excel/google-sheet format that you convert into JSON via a CSV to JSON Converter.
• Or, you can choose an external data source from below:
  • Open Weather Map
  • RiTa.js
  • Data.gov APIs
  • Fun API List
  • Google Maps API
• Note: most API services require you to register with them for an API Key to access their service

2. Fetch your data, and output your data into the console.

• This step is to verify that you are able to successfully access your data.

3. Using JavaScript object notation, access parts of your data.

• First use the console to make sure you are able to extract the correct item.

4. Create container structures in your HTML page to which you will insert your data.

• Append your data into your webpage using jQuery.

Resources

• MDN: Working with JSON
• MDN: Introduction to Web APIs
• Check out the Code Lab Tutorial with Minkyoung Kim
• CSV to JSON Converter

Reference

• Weather Gradient