Pages

▼

2016/11/27

JavaScript list operation examples - list structure and how to access its elements

This post is about the list structure (JSON) of JavaScript and how to access its elements.


JavaScript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<body>

<h2>Create Object from JSON String</h2>

<p id="demo"></p>

<script>
var text = '{"employees":[{"firstName":"John","lastName":"Doe" },{"firstName":"Anna","lastName":"Smith" },{"firstName":"Peter","lastName":"Jones" }]}';

obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[2].firstName + " " + obj.employees[2].lastName;
</script>

</body>
</html>

Source: http://www.w3schools.com/js/js_json.asp

Result

--------------------------------------------------------------------------------------------------------------------------

JavaScript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<body>

<h2>Create Object from JSON String</h2>

<p id="demo"></p>
<pre id="output"></pre>

<script>
var text = '{"employees":[{"firstName":"John","lastName":"Doe" },{"firstName":"Anna","lastName":"Smith" },{"firstName":"Peter","lastName":"Jones" }],"code": [{"temp1":"42","temp2":"24"}, {"temp1":"12345", "temp2":"54321"}], "app": [{"prog1":"AAA","prog2":"BBB"}, {"prog1":"CCC", "prog2":"DDD"}, {"prog1":"EEE", "prog2":"FFF"}, {"prog1":"GGG", "prog2":"HHH"}]}';

obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.employees[1].firstName + " " + obj.employees[1].lastName;

appendPre(obj.code[1].temp1 + " " + obj.code[1].temp2);
appendPre(obj.app[3].prog1 + " " + obj.app[3].prog2);

//appendPre("hello");

var key, count = 0;
    
for (key in obj.employees) {
 if (obj.employees.hasOwnProperty(key)) {
 count++;
 }
}   
//console.log(count);
appendPre("No. of key in employees: " + count);

var key1, count1 = 0;
    
for (key1 in obj.code) {
 if (obj.code.hasOwnProperty(key1)) {
 count1++;
 }
}   
//console.log(count);
appendPre("No. of key in code: " + count1);

var key2, count2 = 0;
    
for (key2 in obj.app) {
 if (obj.app.hasOwnProperty(key2)) {
 count2++;
 }
}   
//console.log(count);
appendPre("No. of key in app: " + count2);

function appendPre(message) {
 var pre = document.getElementById('output');
 var textContent = document.createTextNode(message + '\n');
 pre.appendChild(textContent);
}

</script>
</body>
</html>

Result


--------------------------------------------------------------------------------------------------------------------------

JavaScript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<body>

<pre id="output"></pre>

<script>
var text = '{"employees":[{"firstName":"John","lastName":"Doe" },{"firstName":"Anna","lastName":"Smith" },{"firstName":"Peter","lastName":"Jones" }],"code": [{"temp1":"42","temp2":"24"}, {"temp1":"12345", "temp2":"54321"}], "app": [{"prog1":"AAA","prog2":"BBB"}, {"prog1":"CCC", "prog2":"DDD"}, {"prog1":"EEE", "prog2":"FFF"}, {"prog1":"GGG", "prog2":"HHH"}]}';

obj = JSON.parse(text);

//Find the no. of types in JSON
var count_json = Object.keys(obj).length;
appendPre("No. of types in JSON: " + count_json);
appendPre("");

//Get the type names
appendPre("Type 1: " + Object.keys(obj)[0]); //"employees"
appendPre("Type 2: " + Object.keys(obj)[1]); //"code"
theTypeIs = Object.keys(obj)[2];    //"app"
appendPre("Type 3: " + theTypeIs);
appendPre("");

//Find the no. of key - value pairs in each type
appendPre("No. of key value pairs under each type")
if ((Object.keys(obj)[0]) == "employees") {
 appendPre("For type " + Object.keys(obj)[0] + ": " + obj.employees.length);
}
if ((Object.keys(obj)[1]) == "code") {
 appendPre("For type " + Object.keys(obj)[1] + ": " + obj.code.length);
}
if ((Object.keys(obj)[2]) == "app") {
 appendPre("For type " + Object.keys(obj)[2] + ": " + obj.app.length);
}
appendPre("");

//Accessing the key - value pair in each type
appendPre("The keys under each type")
appendPre("The key in " + Object.keys(obj)[0] + ": " + Object.keys(obj.employees[0]));
appendPre("The key in " + Object.keys(obj)[1] + ": " + Object.keys(obj.code[0]));
appendPre("The key in " + Object.keys(obj)[2] + ": " + Object.keys(obj.app[0]));

appendPre("");

function appendPre(message) {
 var pre = document.getElementById('output');
 var textContent = document.createTextNode(message + '\n');
 pre.appendChild(textContent);
}

</script>
</body>
</html>

Result

--------------------------------------------------------------------------------------------------------------------------

The code below accesses the name of the types and keys in JSON.

JavaScript

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<body>

<pre id="output"></pre>

<script>
var text = '{"employees":[{"firstName":"John","lastName":"Doe" },{"firstName":"Anna","lastName":"Smith" },{"firstName":"Peter","lastName":"Jones" }],"code": [{"temp1":"42","temp2":"24"}, {"temp1":"12345", "temp2":"54321"}], "app": [{"prog1":"AAA","prog2":"BBB"}, {"prog1":"CCC", "prog2":"DDD"}, {"prog1":"EEE", "prog2":"FFF"}, {"prog1":"GGG", "prog2":"HHH"}]}';

obj = JSON.parse(text);

//Find the no. of types in JSON
var count_json = Object.keys(obj).length;
appendPre("No. of types in JSON: " + count_json);
appendPre("");

//Get the type names
appendPre("Type 1: " + Object.keys(obj)[0]); //"employees"
appendPre("Type 2: " + Object.keys(obj)[1]); //"code"
theTypeIs = Object.keys(obj)[2];    //"app"
appendPre("Type 3: " + theTypeIs);
appendPre("");

//Find the no. of key - value pairs in each type
appendPre("No. of key value pairs under each type")
if ((Object.keys(obj)[0]) == "employees") {
 appendPre("For type " + Object.keys(obj)[0] + ": " + obj.employees.length);
}
if ((Object.keys(obj)[1]) == "code") {
 appendPre("For type " + Object.keys(obj)[1] + ": " + obj.code.length);
}
if ((Object.keys(obj)[2]) == "app") {
 appendPre("For type " + Object.keys(obj)[2] + ": " + obj.app.length);
}
appendPre("");

//Accessing the key - value pair in each type
appendPre("The keys under each type")
appendPre("The key in " + Object.keys(obj)[0] + ": " + Object.keys(obj.employees[0]));
appendPre("The key in " + Object.keys(obj)[1] + ": " + Object.keys(obj.code[0]));
appendPre("The key in " + Object.keys(obj)[2] + ": " + Object.keys(obj.app[0]));

appendPre("");

function appendPre(message) {
 var pre = document.getElementById('output');
 var textContent = document.createTextNode(message + '\n');
 pre.appendChild(textContent);
}

</script>
</body>
</html>

Result

References:

JSON in JavaScript
http://www.json.org/js.html

Nested JSON objects - do I have to use arrays for everything?
http://stackoverflow.com/questions/2098276/nested-json-objects-do-i-have-to-use-arrays-for-everything

Javascript get JSON key Name
http://stackoverflow.com/questions/22565077/javascript-get-json-key-name
at

No comments:

Post a Comment