Filtering selects and displays only the records that match a chosen criterion. On a web page, a drop-down list commonly lets users choose a value from a particular data field. section 13.4.2
For a course catalog, Department and Instructor lists can be populated with unique values from the JSON data. Selecting a value causes JavaScript to replace the displayed records with matching records only. An initial option such as “Department (All)” restores the complete dataset. section 13.4.2
Course catalog filter
Ask for a Department drop-down populated from unique Department values, then request JavaScript that displays only courses matching the selected department. Include an “All” option to show every course again. section 13.4.2 section 13.5
A drop-down list with the ID "Department" and the initial value "Department (All)". A drop-down list with the ID "Instructor" and the initial value "Instructor (All)".
Use the two drop-down controls as the visible filtering interface, with IDs and all-record initial values. section 13.4.2
Extract all the unique "Department" values and use them to populate the "Department" drop-down list.
Populate a filter control by extracting unique values from its corresponding JSON field. section 13.4.2
When the user selects an item from the "Department" list, repopulate the article element with just the records that match the selected department. If the user selects the first item in the list, repopulate the article element with every record imported from the JSON file.
Handle a selection by repopulating the page with matching records, or with all imported records when the first option is selected. section 13.4.2
