index.html 2.7KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  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. </article>
  31. <section>
  32. <h1>Movie Information</h1>
  33. <div id="result"></div>
  34. </section>
  35. </body>
  36. <script type="text/javascript">
  37. var get = function()
  38. {
  39. var movies;
  40. //create a new XML object to send the request.
  41. //mosSystem prrevents cross orgina requests error.
  42. var http = new XMLHttpRequest({mozSystem: true});
  43. http.onreadystatechange = function() {
  44. if(http.readyState === 4 && http.status === 200) {
  45. movies = JSON.parse(http.responseText);
  46. //console.log(movies);
  47. for(var i = 0; i < movies.data.length; i ++){
  48. var movie = movies.data[i];
  49. if(movie[10] == "Golden Gate Bridge"){
  50. document.getElementById('result').innerHTML +=(movie[8] + " " + movie[9] + " " + movie[12]) + "<br>";
  51. }
  52. }
  53. }
  54. }
  55. //log the input so I can confirm this in the text file/
  56. //open a new post request to be sent to the host over port 3000
  57. http.open("GET", "https://data.sfgov.org/api/views/yitu-d5am/rows.json?accessType=DOWNLOAD", true);
  58. //send the request as an application.
  59. http.setRequestHeader("Content-Type", "text/plain");
  60. //send the request
  61. http.send();
  62. return movies;
  63. }
  64. get();
  65. </script>
  66. </html>