index.html 2.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  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. <script>
  32. const xhr = new XMLHttpRequest();
  33. xhr.open('get','https://data.sfgov.org/api/views/yitu-d5am/rows.json?accessType=DOWNLOAD');
  34. xhr.onload = function(){
  35. if(this.status === 200){
  36. try{
  37. let resObj = JSON.parse(this.responseText);
  38. console.log(resObj);
  39. let movies = resObj.data;
  40. let out = "";
  41. for(let i = 0; i < movies.length; i++){
  42. if (movies[i].includes("Golden Gate Bridge")){
  43. out += "Title : " + movies[i][8] + '<br>';
  44. out += "Year Released : " + movies[i][9] + '<br>';
  45. out += "Production Company : " + movies[i][12] + '<br>';
  46. out += '<br>'
  47. }
  48. }
  49. document.getElementById("result").innerHTML += out;
  50. }catch(e){
  51. console.warn('There was a error in the JSON. Could not parse!');
  52. }
  53. }else{
  54. console.warn('Did not receive 200 OK from response.');
  55. }
  56. };
  57. xhr.send();
  58. </script>
  59. <section>
  60. <h1>Movie Information</h1>
  61. <div id="result"></div>
  62. <br>
  63. </section>
  64. </body>
  65. </html>