1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <link href="./css/style.css" type="text/css" rel="stylesheet">
- <title>Import Local JSON Data | Zipcode Wilmington</title>
- </head>
- <body>
- <header class="main-header group">
- <div class="title"><h1>Zipcode Wilmington<br>Javascript Lab - Fall 2015</h1></div>
- <div class="lesson-link"><img src="./images/logos/js_logo.png" alt="Javascript"/></div>
- <div class="zip-link"><img src="./images/logos/zip_logo.jpg" alt="Zipcode Wilmington"/></div>
- </header>
-
- <article>
- <h1>Instructions</h1>
- <p>Us the <code>XMLHttpRequest()</code> to receive the remote json feed from the following website<br>
- https://data.sfgov.org/api/views/yitu-d5am/rows.json?accessType=DOWNLOAD
- </p>
-
- <p>The json feed list movies made in San Francisco</p>
-
- <p>Write the following info for each movie to the webpage:
- <ul>
- <li>movie title</li>
- <li>release year</li>
- <li>production company</li>
- </ul>
- </p>
-
- <p>Only list movies that were made at the Golden Gate Bridge</p>
-
- <p>Use <code>document.getElementById('result').innerHTML += <i>your_output</i>;</code> to write the movie's info to the page.</p>
- <p>Append <code>"<br>"</code> to output code to create a new line</p>
- </article>
-
- <section>
- <h1>Movie Information</h1>
- <div id="result"></div>
- </section>
- </body>
-
- <script type="text/javascript">
- var get = function()
- {
- var movies;
- //create a new XML object to send the request.
- //mosSystem prrevents cross orgina requests error.
- var http = new XMLHttpRequest({mozSystem: true});
- http.onreadystatechange = function() {
- if(http.readyState === 4 && http.status === 200) {
- movies = JSON.parse(http.responseText);
- //console.log(movies);
- for(var i = 0; i < movies.data.length; i ++){
- var movie = movies.data[i];
- if(movie[10] == "Golden Gate Bridge"){
- document.getElementById('result').innerHTML +=(movie[8] + " " + movie[9] + " " + movie[12]) + "<br>";
- }
- }
- }
- }
- //log the input so I can confirm this in the text file/
- //open a new post request to be sent to the host over port 3000
- http.open("GET", "https://data.sfgov.org/api/views/yitu-d5am/rows.json?accessType=DOWNLOAD", true);
- //send the request as an application.
- http.setRequestHeader("Content-Type", "text/plain");
- //send the request
- http.send();
- return movies;
- }
-
- get();
- </script>
- </html>
|