index.html 2.7KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <link href="./css/style.css" type="text/css" rel="stylesheet">
  6. <title>Import Local JSON Data | Zipcode Wilmington</title>
  7. </head>
  8. <body>
  9. <header class="main-header group">
  10. <div class="title"><h1>Zipcode Wilmington<br>Javascript Lab - Fall 2015</h1></div>
  11. <div class="lesson-link"><img src="./images/logos/js_logo.png" alt="Javascript"/></div>
  12. <div class="zip-link"><img src="./images/logos/zip_logo.jpg" alt="Zipcode Wilmington"/></div>
  13. </header>
  14. <article>
  15. <h1>Instructions</h1>
  16. <p>Us the <code>XMLHttpRequest()</code> to receive the remote json feed from the following website<br>
  17. https://data.sfgov.org/api/views/yitu-d5am/rows.json?accessType=DOWNLOAD
  18. </p>
  19. <p>The json feed list movies made in San Francisco</p>
  20. <p>Write the following info for each movie to the webpage:
  21. <ul>
  22. <li>movie title</li>
  23. <li>release year</li>
  24. <li>production company</li>
  25. </ul>
  26. </p>
  27. <p>Only list movies that were made at the Golden Gate Bridge</p>
  28. <p>Use <code>document.getElementById('result').innerHTML += <i>your_output</i>;</code> to write the movie's info to the page.</p>
  29. <p>Append <code>"&ltbr&gt"</code> to output code to create a new line</p>
  30. <button id="save" onclick=fun() >
  31. </button>
  32. </article>
  33. <section>
  34. <h1>Movie Information</h1>
  35. <div id="result">
  36. </div>
  37. </section>
  38. </body>
  39. <script type=" text/javascript">
  40. var httpClient=function(){
  41. var movies;
  42. //this.get=function(eUrl,eCallback);{
  43. //var onHttpRequest=new XMLHttpRequest({mozSystem: true});
  44. var onHttpRequest=new XMLHttpRequest();
  45. onHttpRequest.onreadystatechange=function(){
  46. if(onHttpRequest.readyState==4 &&onHttpRequest.status ==200)
  47. {
  48. movies=JSON.parse(onHttpRequest.responseText);
  49. for(var i=0;i<movies.data.length;i++){
  50. var movie=movies.data[i];
  51. if(movie[10] == "Golden Gate Bridge"){
  52. // document.getElementById('result').innerHTML +=(movie[8]+ " "+movie[9]+" "+movie[12]) + "<br>";
  53. document.getElementById('result').innerHTML +=(movie[8] + " " + movie[9] + " " + movie[12]) + "<br>";
  54. }
  55. }
  56. }
  57. // onHttpRequest.open('GET',eUrl,true);
  58. // onHttpRequest.send();
  59. }
  60. var theurl='https://data.sfgov.org/api/views/yitu-d5am/rows.json?accessType=DOWNLOAD';
  61. // var client=new HttpClient();
  62. // client.get(theurl,function(response) ){
  63. // var response1=JSON.parse(response);
  64. // });
  65. onHttpRequest.open("GET",theurl,true);
  66. onHttpRequest.setRequestHeader("Content-Type","text/plain");
  67. onHttpRequest.send();
  68. return movies;
  69. }
  70. httpClient();
  71. </script>
  72. </html>