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 bfd1525

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

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