Skip to content

Lab 9: JSON and Promises

In this lab, you will use the Fetch API and JavaScript Promises to retrieve, process, and validate data asynchronously. The following documentation pages may be helpful:

Starter Code

Download the following files to get started:

  • main.html – An HTML page with Bootstrap.
  • countries.json – A JSON file containing a list of valid countries.
  • data.js – A started JavaScript file.

You will modify and submit only the data.js file. You are encouraged to examine the countries.json file to develop an understanding of the structure of the data.

This lab is using JSON data provided by World Bank. You do not need to study this API, but it is provided here as reference.

Step 1: Asynchronous function calls

Your first step is to complete the self-executing initialization function to issue a query to the World Bank API using fetch(), then process the JSON data retrieved. Implement the processJSON() function based on the embedded comment to create an object to return. Loop through the data array to add each year/population entry to the returned object accordingly. In the fetch() handling, the returned object should be passed directly to redraw().

Step 2: Processing form requests

Your next step is to modify the initialization routine to add an event listener for the form. In the event listener, you need to prevent the page from reloading (calling preventDefault() on the event) then passing form data to runQuery(). The implementation of runQuery() should be similar to Step 1, but using the form data to customize the query. Use the same query parameters as the starter URL (per_page=100 and format=json), and add date=start:end for the selected range.

Step 3: Working with Promises

Your final step is to complete and use the validateForm() function for asynchronous processing of the form data. You will need to change the initialization routine so that the form’s event listener uses validateForm() to get a Promise, passing the resolved value to runQuery() rather than getting the form data directly. If the validation fails (the Promise is rejected), get the error message and put it into the '#metadata' element. Swap that element’s classes to use the .text-danger class instead of .text-muted to make the text red.

In validateForm(), you will need to check three things:

  1. The country is among a small number of allowed countries.
  2. The dates are years between 1960 and 2023.
  3. The start date comes before the end date.

For this lab, treat years as integers and reject values outside the inclusive range 1960 through 2023.

To check if the country is allowed, use fetch() to retrieve the provided countries.json file. Use a relative path so it works in the local lab folder and on the course site. Find the country among that list, using a case-insensitive comparison (e.g., "france" should match "France"), then get the associated ID field. For checking the dates, you should use parseInt() on the date values to ensure they are valid integers first. If everything is fine, use resolve() to return the code ID and the date search string ("start:end"); otherwise, use reject() with a reasonable error message.

Submission

When you are finished, submit data.js to Gradescope.