Skip to content

Commit bfd1525

Browse files
dinanathsj29dinanathsj29
authored
chapter 1.15 updated
chapter 1.15 updated
1 parent c63fa74 commit bfd1525

File tree

1 file changed

+224
-13
lines changed

1 file changed

+224
-13
lines changed

‎readme.md

Lines changed: 224 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -83,8 +83,7 @@ Topics included/covered
8383
- 1.12. [JSON Stringify](#112-json-stringify)
8484
- 1.13. [JSON Arrays](#113-json-arrays)
8585
- 1.14. [Nested JSON Objects](#114-nested-json-objects)
86-
87-
86+
- 1.15. [Looping through JSON Array-Objects](#115-looping-through-json-array-objects)
8887
<!--
8988
2. [JSON Resources](#2-json-resources)
9089
-->
@@ -209,7 +208,7 @@ In JSON, values must be one of the following data types:
209208

210209
> **Syntax & Example**: `1.6.1-employee.json`
211210
212-
```
211+
```json
213212
{
214213
"employeeName": "Dinanath",
215214
"employeeId": 100,
@@ -223,7 +222,7 @@ In JSON, values must be one of the following data types:
223222

224223
> **Syntax & Example**: `1.6.2-technology.json`
225224
226-
```
225+
```json
227226
{
228227
"technologyName": "JSON (JavaScript Object Notation)",
229228
"inventor": "Douglas Crockford",
@@ -238,7 +237,7 @@ In JSON, values must be one of the following data types:
238237

239238
> **Syntax & Example**: `1.6.3-person.json`
240239
241-
```
240+
```json
242241
{
243242
"name": "Dinanath",
244243
"age": 50,
@@ -277,7 +276,7 @@ The JSON format is almost exactly alike to JavaScript objects.
277276
| For AJAX applications, JSON is faster and easier than XML | XML is much more difficult to parse than JSON |
278277
| JSON uses less data overall, so reduces the cost and increases the parsing speed | The XML parsing process can take a long time due to verbose nature of xml and its element structure |
279278
| JSON uses a `map data structure`| XML uses a `tree data structure` |
280-
JSON - JavaScript Object Notation - coding structure and syntax: <p align="center"> <img src="_images-json-javascript-object-notation/1.7.2-technology-json.png" alt="JSON - JavaScript Object Notation - coding structure and syntax" title="JSON - JavaScript Object Notation - coding structure and syntax" width="" /> </p> | XML - eXtensible Markup Language - coding structure and syntax: <p align="center"> <img src="_images-json-javascript-object-notation/1.7.1-technology-xml.png" alt="XML - eXtensible Markup Language - coding structure and syntax" title="XML - eXtensible Markup Language - coding structure and syntax" width="" /> </p> |
279+
| JSON - JavaScript Object Notation - coding structure and syntax: <p align="center"> <img src="_images-json-javascript-object-notation/1.7.2-technology-json.png" alt="JSON - JavaScript Object Notation - coding structure and syntax" title="JSON - JavaScript Object Notation - coding structure and syntax" width="" /> </p> | XML - eXtensible Markup Language - coding structure and syntax: <p align="center"> <img src="_images-json-javascript-object-notation/1.7.1-technology-xml.png" alt="XML - eXtensible Markup Language - coding structure and syntax" title="XML - eXtensible Markup Language - coding structure and syntax" width="" /> </p> |
281280

282281
### 1.7.2. Similarity between JSON and XML
283282

@@ -290,7 +289,7 @@ Both JSON and XML can be used to exchange, send and receive data from a web serv
290289

291290
> **Syntax & Example**: `XML (eXtensible Markup Language) 1.7.1-technology.xml`
292291
293-
```
292+
```xml
294293
<Technology>
295294
<technologyName>XML (eXtensible Markup Language)</Technology>
296295
<inventor>Ed Mosher</inventor>
@@ -305,7 +304,7 @@ Both JSON and XML can be used to exchange, send and receive data from a web serv
305304

306305
> **Syntax & Example**: `JSON (JavaScript Object Notation) 1.7.2-technology.json`
307306
308-
```
307+
```json
309308
{
310309
"technologyName": "XML (eXtensible Markup Language)",
311310
"inventor": "Ed Mosher",
@@ -394,7 +393,7 @@ Second or another way to access, read or modify JSON object data is Square brack
394393
395394
> **Syntax & Example**: `1.10.1-access-modify-json-data.html`
396395
397-
```
396+
```html
398397
<!DOCTYPE html>
399398
<html lang="en">
400399

@@ -463,7 +462,7 @@ Second or another way to access, read or modify JSON object data is Square brack
463462

464463
> **Syntax & Example**: `1.11.1-json-parse.html`
465464
466-
```
465+
```html
467466
<!DOCTYPE html>
468467
<html lang="en">
469468

@@ -510,7 +509,7 @@ Second or another way to access, read or modify JSON object data is Square brack
510509

511510
> **Syntax & Example**: `1.12.1-json-stringify.html`
512511
513-
```
512+
```html
514513
<!DOCTYPE html>
515514
<html lang="en">
516515

@@ -562,7 +561,8 @@ Second or another way to access, read or modify JSON object data is Square brack
562561
3. `Object = [ { }, { }, { }, { } ]`
563562

564563
> **Syntax & Example**: `1.13.1-json-array.html`
565-
```
564+
565+
```html
566566
<!DOCTYPE html>
567567
<html lang="en">
568568

@@ -623,7 +623,8 @@ Second or another way to access, read or modify JSON object data is Square brack
623623
- `Object = { { }, { }, { }, { } }`
624624

625625
> **Syntax & Example**: `1.14.1-json-nested-objects.html`
626-
```
626+
627+
```html
627628
<!DOCTYPE html>
628629
<html lang="en">
629630

@@ -676,3 +677,213 @@ Second or another way to access, read or modify JSON object data is Square brack
676677

677678
</html>
678679
```
680+
681+
1.15. Looping through JSON Array-Objects
682+
---------------------
683+
684+
### 1.15.1. Looping Through an Array
685+
- One can access JSON array values by using a `for` or `for-in` loop:
686+
687+
> **Syntax & Example**: `1.15.1-looping-json-array.html`
688+
689+
```html
690+
<!DOCTYPE html>
691+
<html lang="en">
692+
693+
<head>
694+
<meta charset="UTF-8">
695+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
696+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
697+
<title>looping-json-array</title>
698+
699+
<script type="text/javascript">
700+
701+
// creating JSON object
702+
var TechnologyJSON = {
703+
"technologyName": "JSON (JavaScript Object Notation)",
704+
"usage": "Data storage and exchange format",
705+
"version": 1.0,
706+
"cost": 0.00,
707+
"keywords":['json','JavaScript','Object','Notation','key','value','key value pair']
708+
};
709+
710+
console.log(TechnologyJSON);
711+
712+
// accessing data from a json object
713+
// jsonMainObject.jsonSubObjectName.propertyName;
714+
console.log(TechnologyJSON.keywords);
715+
console.log(TechnologyJSON.keywords[0]);
716+
717+
// 1. for loop
718+
let keywordsLength = TechnologyJSON.keywords.length;
719+
720+
document.write('<h1> Technology keyword - For loop </h1>');
721+
for(let keyword=0; keyword < keywordsLength; keyword++) {
722+
document.write('<li>' + TechnologyJSON.keywords[keyword] + '</li>');
723+
}
724+
725+
// 2. for in loop
726+
document.write('----------------------------------------------------');
727+
document.write('<h1> Technology keyword - For in loop </h1>');
728+
729+
let keywords = TechnologyJSON.keywords;
730+
for(let kw in keywords) {
731+
document.write('<li>' + TechnologyJSON.keywords[kw] + '</li>');
732+
}
733+
734+
</script>
735+
736+
</head>
737+
738+
<body>
739+
740+
</body>
741+
742+
</html>
743+
```
744+
745+
746+
### 1.15.2. Looping Through an Object
747+
748+
> **Syntax & Example**: `1.15.2-looping-json-object.html`
749+
750+
```html
751+
<!DOCTYPE html>
752+
<html lang="en">
753+
754+
<head>
755+
<meta charset="UTF-8">
756+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
757+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
758+
<title>looping-json-object</title>
759+
760+
<script type="text/javascript">
761+
762+
// creating JSON object
763+
var TechnologyJSON = {
764+
"technologyName": "JSON (JavaScript Object Notation)",
765+
"usage": "Data storage and exchange format",
766+
"version": 1.0,
767+
"cost": 0.00,
768+
"keywords":['json','JavaScript','Object','Notation','key','value','key value pair'],
769+
770+
"Html": {
771+
"technologyName": "HTML (HyperText Markup Language)",
772+
"usage": "To create a web page pages/web sites/web apps",
773+
"version": 5.0,
774+
"cost": 0.00
775+
},
776+
};
777+
778+
console.log(TechnologyJSON);
779+
780+
// accessing data from a json object
781+
// jsonMainObject.jsonSubObjectName.propertyName;
782+
console.log(TechnologyJSON.keywords);
783+
console.log(TechnologyJSON.keywords[0]);
784+
console.log(TechnologyJSON.Html);
785+
console.log('----------------------------------------------------');
786+
787+
// for in loop
788+
// document.write('----------------------------------------------------');
789+
document.write('<h1> JSON Object keys </h1>');
790+
791+
for(let _key in TechnologyJSON) {
792+
document.write('<li>' + _key + '</li>');
793+
}
794+
795+
// document.write('----------------------------------------------------');
796+
document.write('<h1> JSON Object keys and Values</h1>');
797+
798+
for(let _key in TechnologyJSON) {
799+
document.write('<li>' + _key + ' : ' + TechnologyJSON[_key] + '</li>');
800+
}
801+
802+
// document.write('----------------------------------------------------');
803+
document.write('<h1> JSON Object - Inner objects keys and Values</h1>');
804+
805+
for(let _key in TechnologyJSON.Html) {
806+
document.write('<li>' + _key + ' : ' + TechnologyJSON.Html[_key] + '</li>');
807+
}
808+
809+
</script>
810+
811+
</head>
812+
813+
<body>
814+
815+
</body>
816+
817+
</html>
818+
```
819+
820+
> **Syntax & Example**: `1.15.3-looping-json-array.html`
821+
822+
```html
823+
<!DOCTYPE html>
824+
<html lang="en">
825+
826+
<head>
827+
<meta charset="UTF-8">
828+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
829+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
830+
<title>looping-json-array</title>
831+
832+
<script type="text/javascript">
833+
834+
// creating JSON object
835+
var ColorsJSON = {
836+
"colors": ["Cyan", "Magenta", "Yellow", "Black", "Red", "Green", "Blue"],
837+
"colorDetails": [
838+
{ "colorName": "Red", "colorHexCode": "#ff0000" },
839+
{ "colorName": "Green", "colorHexCode": "#00ff00" },
840+
{ "colorName": "Blue", "colorHexCode": "#0000ff" },
841+
]
842+
};
843+
844+
console.log(ColorsJSON);
845+
846+
// accessing data from a json object
847+
// jsonMainObject.jsonSubObjectName.propertyName;
848+
console.log(ColorsJSON.colors);
849+
console.log(ColorsJSON.colors[0]);
850+
console.log('----------------------------------------------------');
851+
852+
// for loop
853+
document.write('<h1> Color Index & Color values - For loop </h1>');
854+
let totalColors = ColorsJSON.colors.length;
855+
for (let colorIndex = 0; colorIndex < totalColors; colorIndex++) {
856+
document.write('<li>' + colorIndex + " : " + ColorsJSON.colors[colorIndex] + '</li>');
857+
}
858+
859+
// for in loop
860+
document.write('----------------------------------------------------');
861+
document.write('<h1> Color Index & Color values - For in loop </h1>');
862+
863+
for(let _key in ColorsJSON.colors) {
864+
document.write('<li>' + ColorsJSON.colors[_key] + '</li>');
865+
}
866+
867+
document.write('----------------------------------------------------');
868+
document.write('<h1> Inner Color Index & Color values - For in loop </h1>');
869+
870+
for (let mainKey in ColorsJSON.colorDetails) {
871+
872+
for(let innerKey in ColorsJSON.colorDetails[mainKey]) {
873+
874+
document.write('<li>' + ColorsJSON.colorDetails[mainKey][innerKey] + '</li>');
875+
876+
}
877+
878+
}
879+
880+
</script>
881+
882+
</head>
883+
884+
<body>
885+
886+
</body>
887+
888+
</html>
889+
```

0 commit comments

Comments
 (0)