nsatinover
/
JSON-Lab-2
複製自 Cohort4.2/JSON-Lab-2


			
				
					
						
						
							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>"&ltbr&gt"</code> to output code to create a new line</p>
</article>

<section>
    <h1>Movie Information</h1>
    <div id="result"></div>
</section>
<script>
    var xmlhttp = new XMLHttpRequest();
    var url = "https://data.sfgov.org/api/views/yitu-d5am/rows.json?accessType=DOWNLOAD";
    var data;
    var listGateMovies = "";

    xmlhttp.open("GET", url, true);

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status === 200){
            data = JSON.parse(this.responseText);
            var movieArr = data.data;
            movieFunction(movieArr);
        }
    }

    xmlhttp.send();

    function movieFunction(movieArr) {
        for(var i = 0; i < movieArr.length; i++) {
            if (movieArr[i][10] === "Golden Gate Bridge") {
                listGateMovies +=
                    movieArr[i][8] + ' ' +
                    movieArr[i][9] + ' ' +
                    movieArr[i][12] + '<br>';

            }
        }
        document.getElementById("result").innerText = listGateMovies;
    }

</script>
</body>
</html>