WJB3003
/
JSON-Lab-2
форкнуто от Cohort4.2/JSON-Lab-2
Следить 1
В избранное 0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
Просмотр исходного кода

Completed Lab

William Brown 7 лет назад
Родитель
f2a7909189
Сommit
63b509c536
2 измененных файлов: 27 добавлений и 3 удалений
Единый вид Показать статистику Diff
  1. 4
    3
      index.html
  2. 23
    0
      js/index.js

+ 4
- 3
index.html Просмотреть файл

6 
     <title>Import Local JSON Data | Zipcode Wilmington</title>
 6 
     <title>Import Local JSON Data | Zipcode Wilmington</title>
7 
 </head>
 7 
 </head>
8 
 <body>
 8 
 <body>
9 
+
9 
     <header class="main-header group">
 10 
     <header class="main-header group">
10 
         <div class="title"><h1>Zipcode Wilmington<br>Javascript Lab - Fall 2015</h1></div>
 11 
         <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="lesson-link"><img src="./images/logos/js_logo.png" alt="Javascript"/></div>
33 
         <p>Use <code>document.getElementById('result').innerHTML += <i>your_output</i>;</code> to write the movie's info to the page.</p>
 34 
         <p>Use <code>document.getElementById('result').innerHTML += <i>your_output</i>;</code> to write the movie's info to the page.</p>
34 
         <p>Append <code>"&ltbr&gt"</code> to output code to create a new line</p>
 35 
         <p>Append <code>"&ltbr&gt"</code> to output code to create a new line</p>
35 
     </article>
 36 
     </article>
36 
-
37 
-    <section>
37 
+        <section>
38 
     	<h1>Movie Information</h1>
 38 
     	<h1>Movie Information</h1>
39 
     	<div id="result"></div>
 39 
     	<div id="result"></div>
40 
-    </section>
40 
+        <script src="./js/index.js"></script>
41 
+        </section>
41 
 </body>
 42 
 </body>
42 
 </html>
 43 
 </html>

+ 23
- 0
js/index.js Просмотреть файл

1 
+var request = new XMLHttpRequest();
2 
+
3 
+request.open('GET','https://data.sfgov.org/api/views/yitu-d5am/rows.json?accessType=DOWNLOAD');
4 
+request.onreadystatechange = function(){
5 
+	if((request.status === 200) && (request.readyState === 4)){
6 
+		console.log(request.responseText);
7 
+		var myArr = JSON.parse(this.responseText);
8 
+		let movies = myArr.data;
9 
+
10 
+		var output = '';
11 
+
12 
+		for(let i = 0; i < movies.length; i++){
13 
+			if(movies[i].includes('Golden Gate Bridge')){
14 
+				output += 'Title:' + movies[i][8] + '<br>';
15 
+				output += 'Year Released:' + movies[i][9] + '<br>';
16 
+				output += 'Production Company:' + movies[i][12] + '<br>' + '<br>';
17 
+			}
18 
+		}
19 
+		document.getElementById('result').innerHTML += output;
20 
+	}
21 
+};
22 
+
23 
+request.send();