Server-Side Scripting/Associative Arrays

This lesson introduces dictionary / object / associative array processing.

Objectives and Skills

Objectives and skills for this lesson include:

• Understand dictionaries
• Understand associative array concepts
• Use dictionaries in server-side scripts

Readings

1. Wikipedia: Associative array

Multimedia

• YouTube: Objects in Javascript
• YouTube: JavaScript Array - 07 - Associative Array (Object)
• YouTube: Associative Arrays in JavaScript - Programming with Text

Examples

A data file for these examples may be downloaded from Wikidata: Countries and Temperatures. Select the hidden Wikidata right toolbar and Download / CSV file.

• Go
• Node.js (Express)
• PHP
• Python (FastAPI)
• Python (Flask)

Activities

Complete the following activities using HTML, CSS, and a server-side scripting language. Apply best practices for user interface design and your selected scripting language, including modules, comments, indentations, naming conventions, and constants. Use HTML forms, input elements, and text files for input, server-side scripts for processing, and HTML elements for output. Use separate functions for each type of processing. Avoid global variables by passing parameters and returning results. Add comments at the top of the code modules and include references to any resources used. Add the completed code to your website as /lesson7. For each activity, sample test data may be downloaded from the Wikidata link using the Wikidata hidden right toolbar and selecting Download / CSV file.

1. Review Wikipedia: Saffir–Simpson scale and Wikidata: Tropical Cyclones and Maximum Sustained Winds. Create an application that allows the user to select and upload a comma-separated-values file containing dates, storm names, and maximum sustained winds in kilometers per hour. Build an array of dictionaries to hold the storm data. Display the data sorted by storm intensity in decreasing order. For each storm, display the maximum sustained winds in miles per hour, kilometers per hour, and the Saffir-Simpson scale category for the storm. Use CSS formatting to color-code the data based on storm category, similar to Wikipedia:Template:Saffir-Simpson scale.
2. Review Wikipedia: Moment magnitude scale and Wikidata: Earthquakes and Moment Magnitudes Since 2000 C.E.. Create an application that allows the user to select and upload a comma-separated-values file containing dates, earthquake names, and moment magnitudes. Build an array of dictionaries to hold the earthquake data. Display the data sorted by earthquake intensity in decreasing order. For each earthquake, display the earthquake name, moment magnitude, and a magnitude description. See Wikipedia:Richter magnitude scale#Richter magnitudes for magnitude description ranges (Micro, Minor, Light, etc.). Use CSS formatting to color-code the data based on magnitude description.
3. Review Wikipedia:Wildfire and Wikidata: Wildfires and Area. Create an application that allows the user to select and upload a comma-separated-values file containing dates, wildfires, and area impacted. Build an array of dictionaries to hold the wildfire data. Display the wildfire information in decreasing order of impact. Use CSS formatting to color-code the data based on the order of magnitude of area impacted (1, 10, 100, 1,000, etc.).
4. Review Wikipedia:Tsunami and Wikidata: Tsunamis by Date. Create an application that allows the user to select and upload a comma-separated-values file containing dates, tsunamis, continents, and countries. Build an array of dictionaries to hold the tsunami data. Display the tsunami information in alphabetical order by continent and country. Use CSS formatting to color-code the data based on continent.

Lesson Summary

Additional items may be contributed by course participants

• Associative arrays, also called maps or dictionaries, are an abstract data type that can hold data in key-value pairs.
• The associative array data structure describes the association between a key and a value. This association is also called mapping and is implemented in different ways based on the language being used. The basic functionality of this data structure exists for most modern programming languages: add a key-value pair, replace the value of a particular key, remove a key-value pair, and lookup a value assigned to a particular key.
• Unlike most languages, JavaScript doesn't have associative arrays, rather arrays indexes can be named as objects.
• If named indexes are used in JavaScript, the array will be redefined as a standard object, because JavaScript doesn't support associative arrays.
• There is no JavaScript 'dictionary' datatype, but we can create key-value pairs using JavaScript Objects (ex. var dict = {key1: value1};).

Key Terms

Additional items may be contributed by course participants

associative array

An associative array, map, symbol table, or dictionary is an abstract data type composed of a collection of (key, value) pairs, such that each possible key appears at most once in the collection.

hash table

A common use for associative arrays, a hash table is a data structure that maps keys to values using a hash function.

JSON (JavaScript Object Notation)

A lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate.

object

In Javascript, objects are a collection of properties that associate a name(key) and a value.

See Also

• Geeks for Geeks: How to create dictionary and add key–value pairs dynamically
• MDN: JavaScript Map

References

← Arrays

Server-Side Scripting

Internet Data →