Skip to content

Commit 02d7bac

Browse files
dinanathsj29dinanathsj29
authored
examples 2.3 and 2.4 uploaded
examples 2.3 and 2.4 uploaded
1 parent 0207052 commit 02d7bac

File tree

5 files changed

+117
-0
lines changed

5 files changed

+117
-0
lines changed

‎_examples-ajax/2.3-loading-json-data/2.3-loading-json-data.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>loading json data</title>
9+
10+
<script type="text/javascript" src="2.3-loading-json-data.js"></script>
11+
12+
</head>
13+
14+
<body>
15+
16+
</body>
17+
18+
</html>

‎_examples-ajax/2.3-loading-json-data/2.3-loading-json-data.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
console.log('2.3-loading-json-data.js loaded');
2+
3+
var xhr = new XMLHttpRequest();
4+
xhr.open('GET','animals1.json');
5+
6+
xhr.onload = function() {
7+
let results = xhr.responseText;
8+
console.log('string type of json:',results);
9+
document.write('<h1>Load JSON data from .json file:</h1>');
10+
document.write(results);
11+
12+
results = JSON.parse(xhr.responseText);
13+
console.log('json object after parsing:',results);
14+
15+
document.write('<h2>Load 0 th animal details:</h2>');
16+
var animal0 = results[0].name;
17+
document.write('Name : ' + animal0);
18+
}
19+
20+
xhr.send();

‎_examples-ajax/2.3-loading-json-data/animals1.json

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
[
2+
{
3+
"name": "Meowsy1",
4+
"species": "cat",
5+
"foods": {
6+
"likes": [
7+
"tuna",
8+
"catnip"
9+
],
10+
"dislikes": [
11+
"ham",
12+
"zucchini"
13+
]
14+
}
15+
},
16+
{
17+
"name": "Barky1",
18+
"species": "dog",
19+
"foods": {
20+
"likes": [
21+
"bones",
22+
"carrots"
23+
],
24+
"dislikes": [
25+
"tuna"
26+
]
27+
}
28+
},
29+
{
30+
"name": "Purrpaws1",
31+
"species": "cat",
32+
"foods": {
33+
"likes": [
34+
"mice"
35+
],
36+
"dislikes": [
37+
"cookies"
38+
]
39+
}
40+
}
41+
]

‎_examples-ajax/2.4-loading-json-web-api-data/2.4-loading-json-web-api-data.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>loading web api data</title>
9+
10+
<script type="text/javascript" src="2.4-loading-json-web-api-data.js"></script>
11+
12+
</head>
13+
14+
<body>
15+
16+
</body>
17+
18+
</html>

‎_examples-ajax/2.4-loading-json-web-api-data/2.4-loading-json-web-api-data.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
console.log('2.4-loading-json-web-api-data.js loaded');
2+
3+
var xhr = new XMLHttpRequest();
4+
xhr.open('GET','https://learnwebcode.github.io/json-example/animals-1.json');
5+
6+
xhr.onload = function() {
7+
let results = xhr.responseText;
8+
console.log('string type of json:',results);
9+
document.write('<h1>Load JSON data from .json file:</h1>');
10+
document.write(results);
11+
12+
results = JSON.parse(xhr.responseText);
13+
console.log('json object after parsing:',results);
14+
15+
document.write('<h2>Load 1 st animal details:</h2>');
16+
var animal1 = results[1].name;
17+
document.write('Name : ' + animal1);
18+
}
19+
20+
xhr.send();

0 commit comments

Comments
 (0)