index.html

 
     <section>
     	<h1>Movie Information</h1>
-    	<div id="result"></div>
+
+    	<div id="result">
+      <script>
+      let httpClient=function(){
+      let movies;
+      let url='https://data.sfgov.org/api/views/yitu-d5am/rows.json?accessType=DOWNLOAD';
+      let HRequest = new XMLHttpRequest();
+      HRequest.onreadystatechange =function(){
+          if(HRequest.readyState ==4 && HRequest.status == 200){
+              movies = JSON.parse(HRequest.responseText);
+              for(var i = 0; i < movies.data.length;i++){
+                  let movie= movies.data[i];
+                  if(movie[10]=="Golden Gate Bridge"){
+                      document.getElementById('result').innerHTML +=(movie[8]+ " "+movie[9]+" "+movie[12])  + "<br>";
+                  }
+              }
+          }
+      }
+      HRequest.open("GET",url,true);
+      HRequest.setRequestHeader("Content-Type","text/plain");
+      HRequest.send();
+      return movies;}
+      httpClient();
+
+      </script>
+      </div>
+
     </section>
 </body>
-</html>
+</html>