script added to detect onchange for make and update corresponding value

server.py

@@ -192,11 +192,11 @@ def get_distinct_makes_for_year(year):
 
     for row in results:
         make_object = dict()
-        make_object['name'] = row[0]
         make_object['value'] = row[0]
+        make_object['label'] = row[0]
         make_list.append(make_object)
 
-    return jsonify({'Makes' : make_list})
+    return jsonify({'makes' : make_list})
 # ----------------------
 @app.route('/view_report', methods=['POST'])
 def handle_request():

templates/report.html

@@ -61,14 +61,21 @@ <h2 class="text-info">Vehicle Report</h2>
   year_select.onchange = function() {
     // Retrieve value
     year = year_select.value;
-
-    // Use fetch() API to access predefined flask route
+    // Use fetch() API to access predefined flask route [similar concept to AJAX]
     fetch('/makes/'+year).then(function(response) {
+      // parse response as JSON and return data
       response.json().then(function(data) {
         console.table(data)
+        // use string builder to make new HTML objects for the given make
+        let makes_HTML = '';
+        // Loop over JSON object, the outermost key was set as 'makes'in flask route
+        for (let make of data.makes) {
+          makes_HTML += '<option value="'+ make.value + '">' + make.label + '</option>';
+        }
+        // overwrite the old HTML
+        make_select.innerHTML = makes_HTML;
       });
     });
   }
-
 </script>
 {% endblock content %}