You should consult the following references as needed.
Starting Code
Start by downloading and extracting the source code in this ZIP file:
There are three source code files there: index.html,
data.json, and funs.js. You will only modify
the code in funs.js.
Step 1: Initialization functions
Your first step is to populate an unordered list based on an array of
objects. The data.json file contains an array of movie objects
based on real data retrieved from IMDb.
Each entry in this array has the following fields:
id- A unique identifier for the movie
title- The name of the movie
rating- The IMDb rating based on user votes (range from 0 to 10)
runtime- The runtime of the movie as measured in minutes
year- The year the movie was released
Your first task is to define the setTitleContent function
that modifies a movie object by copying the movie's title into a new field
called textContent. (Later functions will modify this new
field further.) Note that this function will be used within a call to
map, so it will need to return the modified movie object.
Once you've got setTitleContent working, you will create a
self-executing initialization function where indicated. Some parts of this
code are provided for convenience. Your main task here is to use
fetch to retrieve the data from data.json.
Once you've retrieved the data and parsed it as JSON, you will use map
(on setTitleContent) and forEach (using
buildItem) to build an HTML list dynamically. Note that
buildItem relies on the movie's textContent field that
you add in setTitleContent.
Do NOT use any form of loop (such as a for-each
loop) for this lab. The purpose is to work with the array functions only.
The original data set has over 100 movies in it. For this stage, you will
just use the first 10 records. Your generated list should look like the one
in this screenshot.
In the provided source code, there are hard-coded
hostname and url variables that your call to
fetch will use. Note that your code will not actually access the
data.json file you retrieved. CORS (a security mechanism we will
discuss in a few weeks) prevents using fetch with a local file,
so it must retrieve the data from a web server over HTTP.
Step 2: Chaining map calls
Your next task is to implement three more functions to append the year,
runtime, and rating values to the movie's textContent field.
Extend your initialization function so that these functions are chained
together using a sequence of map calls.
A completed version of this step will produce output such as that shown
in this screenshot. Note that the only
observable difference here is the additional fields in the list item.
Step 3: Queries and filters
Your final task is to implement a group of functions for setting
minimum or maximum criteria to filter the data set based on particular
values. You'll start by implementing setMinRating and the
related functions. These functions will return a closure that will return
a Boolean value (true or false) based on whether a movie would satisfy
the condition. Once you've complete this function, you cam complete the
others that serve similar purposes for year and runtime.
First, note that you need to use
parseInt and parseFloat on the fields that you
get from the movie objects. These fields are originally strings, so you
cannot do a basic > or < comparisons.
Also make sure that you are returning these comparisons as closures (i.e.,
return an arrow function) rather than trying to return true or false itself.
Finally, amend your initialization function to filter results. If the
query string is empty (i.e., query is undefined),
then you should continue to display the first 10 movies. However, if there
is a query, you'll need to get the appropriate minimum or maximum values.
For simplicity, the provided code splits the query string into an array
of criteria, such as minrating=8.2.
The navigation menu at the top of the page contains some embedded
query strings for testing purposes. Your results should match those shown
in the following screenshots:
Submission
This submission will not be autograded with Gradescope. Instead,
submit just funs.js to Canvas.
