FALLSEM2019-20 ITE1002 ETH VL2019201002518 Reference Material II 16-Sep-2019 JSON EXAMPLE CODE PDF

1 <!
DOCTYPE html>
2 <html>
3 <body>
4
5 <p>Access a JSON object using dot notation:</p>
6
7 <p id="demo1"></p>
9 <script>
10 var myObj, x,y;
11 myObj = {"name":"John", "age":30, "car":null};
12 x = myObj.name;
13 y = myObj["name"];
14 document.getElementById("demo1").innerHTML = x;
15 document.getElementById("demo2").innerHTML = y;
16 </script>
17
18 </body>
19 </html>
20
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <h2>Convert a string into a date object.</h2>
6
7 <p id="demo"></p>
8
9 <script>
10 var text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
11 var obj = JSON.parse(text);
12 obj.birth = new Date(obj.birth);
13 document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
14 </script>
15
16 </body>
17 </html>
18
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <h2>Create Object from JSON String</h2>
6
7 <p id="demo"></p>
8
9 <script>
10 var txt = '{"name":"John", "age":30, "city":"New York"}'
11 var obj = JSON.parse(txt);
12 document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
13 </script>
14
15 </body>
16 </html>
17
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <h2>Create JSON string from a JavaScript array.</h2>
6
7 <p id="demo"></p>
8
9 <script>
10
11 var arr = [ "John", "Peter", "Sally", "Jane" ];
12 var myJSON = JSON.stringify(arr);
13 document.getElementById("demo").innerHTML = myJSON;
14
15 </script>
16
17 </body>
18 </html>
19
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <h2>JSON.stringify will convert any date objects into strings.</h2>
6
7 <p id="demo"></p>
8
9 <script>
10 var obj = { name: "John", today: new Date(), city: "New York" };
11 var myJSON = JSON.stringify(obj);
13 </script>
14
15 </body>
16 </html>n<!DOCTYPE html>
17 <html>
18 <body>
19
20 <p>Access a JSON object using dot notation:</p>
21
22 <p id="demo"></p>
23
24 <script>
25 var myObj, x;
27 x = myObj.name;
28 document.getElementById("demo").innerHTML = x;
29 </script>
30
31 </body>
32 </html>
33
34
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <h2>Create JSON string from a JavaScript object.</h2>
6
7 <p id="demo"></p>
8
9 <script>
10 var obj = { name: "John", age: 30, city: "New York" };
11 var myJSON = JSON.stringify(obj);
13 </script>
14
15 </body>
16 </html>
17
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <p>Looping through arrays inside arrays.</p>
6
10 <script>
11 var myObj, i, j,x = "";
12 myObj = {
13 "name":"John",
14 "age":30,
15 "cars": [
16 {"name":"Ford", "models":["Fiesta", "Focus", "Mustang"]},
17 {"name":"BMW", "models":["320", "X3", "X5"]},
18 {"name":"Fiat", "models":["500", "Panda"] }
19 ]
20 }
21 for (i in myObj.cars) {
22 x += "<h2>" + myObj.cars[i].name + "</h2>";
23 for (j in myObj.cars[i].models) {
24 x += myObj.cars[i].models[j] + "<br>";
25 }
26 }
28
29 //modify
30 myObj.cars[1] = "Mercedes";
32 x += myObj.cars[i] + "<br>";
33 }
35
36 //delete
37 delete myObj.cars[1];
40 }
42
43 </script>
44
45 </body>
46 </html>
47
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <p>Access an array value of a JSON object.</p>
6
10 <script>
11 var myObj, x,i;
12 myObj = {
13 "name":"John",
14 "age":30,
15 "cars":[ "Ford", "BMW", "Fiat" ]
16 };
17 x = myObj.cars[0];
19
20 //loop
23 }
25
26 for (i = 0; i < myObj.cars.length; i++) {
28 }
30 </script>
31
32 </body>
33 </html>
34
1 <html> <body> <p>How to access nested JSON objects.</p>
5 <script>
6 var myObj = {
7 "name":"John",
8 "age":30,
9 "cars": {
10 "car1":"Ford",
11 "car2":"BMW",
12 "car3":"Fiat" } }
13
14 for (x in myObj.cars) {
15 document.getElementById("demo1").innerHTML += myObj.cars[x] + "<br>";
16 }
17 //or:
18 //document.getElementById("demo1").innerHTML += myObj.cars["car2"];
19
20 myObj.cars.car2 = "Mercedes"; //or
21 //myObj.cars["car2"] = "Mercedes";
24 }
25 //document.getElementById("demo2").innerHTML += myObj.cars.car2 + "<br>"; //or:
26 //Delete Object Properties
27 delete myObj.cars.car2;
30 }
31 //document.getElementById("demo3").innerHTML += myObj.cars.car2 + "<br>"; //or:
32
33 </script> </body></html>
34
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <p>How to loop through all properties in a JSON object.</p>
6
9 <script>
10 var myObj, x,y;
12 for (x in myObj) {
13 document.getElementById("demo1").innerHTML += x + "<br>";
14 }
15
16 for (y in myObj) {
17 document.getElementById("demo2").innerHTML += myObj[y] + "<br>";
18 }
19 </script>
20
21 </body>
22 </html>
23
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <p>How to access nested JSON objects.</p>
6
9 <p id="modify"></p>
10 <p id="delete"></p>
11 <script>
12 var i;
13 var myObj = {
14 "name":"John",
15 "age":30,
16 "cars": {
17 "car1":"Ford",
18 "car2":"BMW",
19 "car3":"Fiat"
20 }
21 }
22 document.getElementById("demo1").innerHTML += myObj.cars.car2 + "<br>";
23 //or:
24 //document.getElementById("demo2").innerHTML += myObj.cars["car2"];
25
26 myObj.cars.car2 = "Mercedes"; //modify
29 }
30 document.getElementById("modify").innerHTML = x;
31
32
33 delete myObj.cars.car2; //delete
36 }
37 document.getElementById("delete").innerHTML = x;
38
39 </script>
40 </script>
41
42 </body>
43 </html>
44

FALLSEM2019-20 ITE1002 ETH VL2019201002518 Reference Material II 16-Sep-2019 JSON EXAMPLE CODE PDF

Uploaded by

Copyright:

Available Formats

You might also like

FALLSEM2019-20 ITE1002 ETH VL2019201002518 Reference Material II 16-Sep-2019 JSON EXAMPLE CODE PDF

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

FALLSEM2019-20 ITE1002 ETH VL2019201002518 Reference Material II 16-Sep-2019 JSON EXAMPLE CODE PDF

Uploaded by

Copyright:

Available Formats

1 <!

You might also like