index.html

@@ -36,7 +36,8 @@
 
     <section>
     	<h1>Movie Information</h1>
-    	<div id="result"></div>
+        <div id="result"></div>
+        <script src = "javaScript.js" type = "text/javascript"></script>
     </section>
 </body>
 </html>

javaScript.js

@@ -0,0 +1,18 @@
+var httpRequest = new XMLHttpRequest();
+httpRequest.open("GET", "https://data.sfgov.org/api/views/yitu-d5am/rows.json?accessType=DOWNLOAD", true);
+httpRequest.onreadystatechange = function() {
+    if ((httpRequest.readyState == 4) && (httpRequest.status == 200)) {
+
+        var jsonInfo = JSON.parse(httpRequest.responseText).data;
+
+        for (var i = 0; i < jsonInfo.length; i++) {
+            if (jsonInfo[i][10] == "Golden Gate Bridge") {
+                document.getElementById('result').innerHTML += (jsonInfo[i][8] + " (" + jsonInfo[i][9] 
+                + ") <br> Produced by " + jsonInfo[i][12] + "<br><br>");
+            }
+        }
+    }
+};
+
+httpRequest.send();
+