Skip to content

Commit 81de222

Browse files
dinanathsj29dinanathsj29
authored
json examples uploaded
json examples uploaded
1 parent ad8a82b commit 81de222

File tree

17 files changed

+611
-0
lines changed

17 files changed

+611
-0
lines changed

‎_examples-json-javascript-object-notation/1.10-access-modify-json-data/1.10.1-access-modify-json-data.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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>json-access-modify-data</title>
9+
10+
<script type="text/javascript">
11+
12+
// creating JSON object
13+
var TechnologyJSON = {
14+
"technologyName": "JSON (JavaScript Object Notation)",
15+
"inventor": "Douglas Crockford",
16+
"usage": "Data storage and exchange format",
17+
"version": 1.0,
18+
"cost": 0,
19+
"license": "Open Source - MIT"
20+
}
21+
22+
// accessing data from a json object
23+
// JsonObjectName.propertyName
24+
25+
// Dot notation syntax
26+
console.log(TechnologyJSON.inventor);
27+
document.write('<li>' + TechnologyJSON.inventor + '</li>');
28+
document.write('<li>' + TechnologyJSON.usage + '</li>');
29+
30+
// Square bracket syntax
31+
console.log(TechnologyJSON['inventor']);
32+
document.write('<li>' + TechnologyJSON['inventor'] + '</li>');
33+
document.write('<li>' + TechnologyJSON['license'] + '</li>');
34+
35+
// modifying data
36+
var techName1 = TechnologyJSON.technologyName = 'XML';
37+
console.log(techName1);
38+
document.write('<br/><br/><li>' + techName1 + '</li>');
39+
40+
var techName2 = TechnologyJSON['technologyName'] = 'AJAX';
41+
console.log(techName2);
42+
document.write('<br/><br/><li>' + techName2 + '</li>');
43+
44+
</script>
45+
46+
</head>
47+
48+
<body>
49+
50+
</body>
51+
52+
</html>

‎_examples-json-javascript-object-notation/1.11-json-parse/1.11.1-json-parse.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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>json-parse</title>
9+
10+
<script type="text/javascript">
11+
12+
// creating string object to hold json like data
13+
var TechnologyStringObj = '{ "technologyName": "JSON (JavaScript Object Notation)", "inventor": "Douglas Crockford", "usage": "Data storage and exchange format", "version": 1.0, "cost": 0, "license": "Open Source - MIT" }';
14+
15+
console.log('TechnologyStringObj: ', TechnologyStringObj);
16+
console.log(TechnologyStringObj.technologyName); //undefined
17+
18+
// parse a string object to json
19+
var TechnologyJSON = JSON.parse(TechnologyStringObj);
20+
console.log('JSON.parse TechnologyJSON: ', TechnologyJSON);
21+
22+
// accessing data from a json object
23+
// JsonObjectName.propertyName
24+
console.log(TechnologyJSON.technologyName);
25+
26+
</script>
27+
28+
</head>
29+
30+
<body>
31+
32+
</body>
33+
34+
</html>

‎_examples-json-javascript-object-notation/1.12-json-strigify/1.12.1-json-stringify.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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>json-stringify</title>
9+
10+
<script type="text/javascript">
11+
12+
// json object
13+
var TechnologyJSON = { "technologyName": "JSON (JavaScript Object Notation)", "inventor": "Douglas Crockford", "usage": "Data storage and exchange format", "version": 1.0, "cost": 0, "license": "Open Source - MIT" };
14+
15+
console.log(TechnologyJSON);
16+
console.log(TechnologyJSON.technologyName);
17+
18+
// by default json object are not printed in html view - it shows `[object Object]`
19+
document.write('initial TechnologyJSON object:', TechnologyJSON);
20+
21+
// parse a json object to string
22+
var TechnologyJSONStringify = JSON.stringify(TechnologyJSON);
23+
24+
// once json object converted to string - it can be available/placed for view
25+
document.write('<br/> <br/> <strong>JSON.stringify</strong> :', TechnologyJSONStringify);
26+
27+
console.log('JSON.stringify TechnologyJSONStringify: ', TechnologyJSONStringify);
28+
console.log(TechnologyJSONStringify.technologyName); //undefined
29+
30+
// parse a string object to json
31+
var TechnologyJSONObj = JSON.parse(TechnologyJSONStringify);
32+
console.log(TechnologyJSONObj);
33+
console.log(TechnologyJSONObj.technologyName);
34+
35+
</script>
36+
37+
</head>
38+
39+
<body>
40+
41+
</body>
42+
43+
</html>

‎_examples-json-javascript-object-notation/1.13-json-arrays/1.13.1-json-arrays.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
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>json-arrays</title>
9+
10+
<script type="text/javascript">
11+
12+
// creating JSON object
13+
var TechnologiesJSONArray = [
14+
{
15+
"technologyName": "JSON (JavaScript Object Notation)",
16+
"usage": "Data storage and exchange format",
17+
"version": 1.0,
18+
"cost": 0.00
19+
},
20+
21+
{
22+
"technologyName": "HTML (HyperText Markup Language)",
23+
"usage": "To create a web page pages/web sites/web apps",
24+
"version": 5.0,
25+
"cost": 0.00
26+
}
27+
];
28+
29+
console.log(TechnologiesJSONArray);
30+
31+
// accessing data from a json object
32+
// jsonObject[arrayPosition/ indexPosition].propertyName;
33+
console.log(TechnologiesJSONArray[0].version); // 1.0
34+
console.log(TechnologiesJSONArray[1].version); // 5.0
35+
36+
document.write('<li> <strong>Technology Name:</strong> ' + TechnologiesJSONArray[0].technologyName + ' || <strong>Version is:</strong> ' + TechnologiesJSONArray[0].version + '</li>');
37+
document.write('<li> <strong>Technology Name:</strong> ' + TechnologiesJSONArray[1].technologyName + ' || <strong>Version is:</strong> ' + TechnologiesJSONArray[1].version + '</li>');
38+
39+
</script>
40+
41+
</head>
42+
43+
<body>
44+
45+
</body>
46+
47+
</html>

‎_examples-json-javascript-object-notation/1.14-json-nested-objects/1.14.1-json-nested-objects.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
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>json-nested-objectes</title>
9+
10+
<script type="text/javascript">
11+
12+
// creating JSON object
13+
var TechnologyJSONObject = {
14+
"Json": {
15+
"technologyName": "JSON (JavaScript Object Notation)",
16+
"usage": "Data storage and exchange format",
17+
"version": 1.0,
18+
"cost": 0.00
19+
},
20+
21+
"Html": {
22+
"technologyName": "HTML (HyperText Markup Language)",
23+
"usage": "To create a web page pages/web sites/web apps",
24+
"version": 5.0,
25+
"cost": 0.00
26+
},
27+
};
28+
29+
console.log(TechnologyJSONObject);
30+
31+
// accessing data from a json object
32+
// jsonMainObject.jsonSubObjectName.propertyName;
33+
console.log(TechnologyJSONObject.Json.version); // 1.0
34+
console.log(TechnologyJSONObject.Html.version); // 5.0
35+
36+
// square bracket syntax
37+
console.log(TechnologyJSONObject.Json["version"]); // 1.0
38+
console.log(TechnologyJSONObject.Html["version"]); // 5.0
39+
40+
document.write('<li> <strong>Technology Name:</strong> ' + TechnologyJSONObject.Json.technologyName + ' || <strong>Version is:</strong> ' + TechnologyJSONObject.Json.version + '</li>');
41+
document.write('<li> <strong>Technology Name:</strong> ' + TechnologyJSONObject.Html.technologyName + ' || <strong>Version is:</strong> ' + TechnologyJSONObject.Html.version + '</li>');
42+
43+
</script>
44+
45+
</head>
46+
47+
<body>
48+
49+
</body>
50+
51+
</html>

‎_examples-json-javascript-object-notation/1.15-looping-json-array-object/1.15.1-looping-json-array.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
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>looping-json-array</title>
9+
10+
<script type="text/javascript">
11+
12+
// creating JSON object
13+
var TechnologyJSON = {
14+
"technologyName": "JSON (JavaScript Object Notation)",
15+
"usage": "Data storage and exchange format",
16+
"version": 1.0,
17+
"cost": 0.00,
18+
"keywords":['json','JavaScript','Object','Notation','key','value','key value pair']
19+
};
20+
21+
console.log(TechnologyJSON);
22+
23+
// accessing data from a json object
24+
// jsonMainObject.jsonSubObjectName.propertyName;
25+
console.log(TechnologyJSON.keywords);
26+
console.log(TechnologyJSON.keywords[0]);
27+
28+
// 1. for loop
29+
let keywordsLength = TechnologyJSON.keywords.length;
30+
31+
document.write('<h1> Technology keyword - For loop </h1>');
32+
for(let keyword=0; keyword < keywordsLength; keyword++) {
33+
document.write('<li>' + TechnologyJSON.keywords[keyword] + '</li>');
34+
}
35+
36+
// 2. for in loop
37+
document.write('----------------------------------------------------');
38+
document.write('<h1> Technology keyword - For in loop </h1>');
39+
40+
let keywords = TechnologyJSON.keywords;
41+
for(let kw in keywords) {
42+
document.write('<li>' + TechnologyJSON.keywords[kw] + '</li>');
43+
}
44+
45+
</script>
46+
47+
</head>
48+
49+
<body>
50+
51+
</body>
52+
53+
</html>

‎_examples-json-javascript-object-notation/1.15-looping-json-array-object/1.15.2-looping-json-object.html

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
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>looping-json-object</title>
9+
10+
<script type="text/javascript">
11+
12+
// creating JSON object
13+
var TechnologyJSON = {
14+
"technologyName": "JSON (JavaScript Object Notation)",
15+
"usage": "Data storage and exchange format",
16+
"version": 1.0,
17+
"cost": 0.00,
18+
"keywords":['json','JavaScript','Object','Notation','key','value','key value pair'],
19+
20+
"Html": {
21+
"technologyName": "HTML (HyperText Markup Language)",
22+
"usage": "To create a web page pages/web sites/web apps",
23+
"version": 5.0,
24+
"cost": 0.00
25+
},
26+
};
27+
28+
console.log(TechnologyJSON);
29+
30+
// accessing data from a json object
31+
// jsonMainObject.jsonSubObjectName.propertyName;
32+
console.log(TechnologyJSON.keywords);
33+
console.log(TechnologyJSON.keywords[0]);
34+
console.log(TechnologyJSON.Html);
35+
console.log('----------------------------------------------------');
36+
37+
// for in loop
38+
// document.write('----------------------------------------------------');
39+
document.write('<h1> JSON Object keys </h1>');
40+
41+
for(let _key in TechnologyJSON) {
42+
document.write('<li>' + _key + '</li>');
43+
}
44+
45+
// document.write('----------------------------------------------------');
46+
document.write('<h1> JSON Object keys and Values</h1>');
47+
48+
for(let _key in TechnologyJSON) {
49+
document.write('<li>' + _key + ' : ' + TechnologyJSON[_key] + '</li>');
50+
}
51+
52+
// document.write('----------------------------------------------------');
53+
document.write('<h1> JSON Object - Inner objects keys and Values</h1>');
54+
55+
for(let _key in TechnologyJSON.Html) {
56+
document.write('<li>' + _key + ' : ' + TechnologyJSON.Html[_key] + '</li>');
57+
}
58+
59+
</script>
60+
61+
</head>
62+
63+
<body>
64+
65+
</body>
66+
67+
</html>

0 commit comments

Comments
 (0)