ElliottStansbury
/
JSON-Lab-2
フォーク元 Cohort4.2/JSON-Lab-2


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
							<!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>
    <script>
        const xhr = new XMLHttpRequest();

        xhr.open('get','https://data.sfgov.org/api/views/yitu-d5am/rows.json?accessType=DOWNLOAD');


        xhr.onload = function(){
            if(this.status === 200){
                try{
                    let resObj = JSON.parse(this.responseText);
                    console.log(resObj);
                    let movies = resObj.data;
                    let out = "";
                    for(let i = 0; i < movies.length; i++){
                
                        if (movies[i].includes("Golden Gate Bridge")){
                            out += "Title : " + movies[i][8] + '<br>';
                            out += "Year Released : " + movies[i][9] + '<br>';
                            out += "Production Company : " + movies[i][12] + '<br>';
                            out += '<br>'
       
                }

            }
                   document.getElementById("result").innerHTML += out;
                }catch(e){
                    console.warn('There was a error in the JSON. Could not parse!');
                }
                
            }else{
                console.warn('Did not receive 200 OK from response.');
            }
            

        };

        xhr.send();
    </script>

    <section>
    	<h1>Movie Information</h1>
        <div id="result"></div>
        <br>
    </section>
</body>
</html>