jasamuels
/
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>
<script type="text/javascript">
    let arr = [];
        let ajax = new XMLHttpRequest();
        ajax.onreadystatechange = function () {
            if (ajax.readyState === 4 && ajax.status === 200) {
                var jsondata = JSON.parse(ajax.responseText);

                for (i = 0; i < jsondata.data.length; i++) {
                    if (jsondata.data[i][10] === 'Golden Gate Bridge'){
                        arr.push(jsondata.data[i])
                    }
                }

                console.log(arr);

                for (i = 0; i < arr.length; i++){
                    document.getElementById('result').innerHTML +=
                        "<b>Movie Title:</b> " + arr[i][8]
                        + " | <b>Release Year:</b> "
                        + arr[i][9]
                        + " | <b>Production Company:</b> "
                        + arr[i][12]
                        + "<br>";
                }
            }
            };
    ajax.open('GET', 'https://data.sfgov.org/api/views/yitu-d5am/rows.json?accessType=DOWNLOAD', true);
    ajax.send();

</script>


    <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>
</body>
</html>