Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 81de222

Browse files
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
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>
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>
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>
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>
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>
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>
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)

AltStyle によって変換されたページ (->オリジナル) /