Menu

Create JS Object from JSON text

How to traverse on JSON (JavaScript object notation) object using JavaScript and how to traverse JSON array using JavaScript?

 Below is the simple HTML and JavaScript based program, which have a JSON data object and further that json object have json array. Using JavaScript we will read that json data one by one and generate output for end user, and later that output we will show on html page.

 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
<html>
<body>
<h2>Create JS Object from JSON String</h2>
 <p id="output">
 </p>
<script>
var txt = '{"employees":[' +
'{"firstName":"Rashid","lastName":"Jorvee" },' +
'{"firstName":"Java","lastName":"Script" },' +
'{"firstName":"Node","lastName":"JS" }]}';


var jsonData = JSON.parse(txt);
var output="";
for (var i = 0; i < jsonData.employees.length; i++) {
    var counter = jsonData.employees[i];
    console.log(counter.firstName);
    output += "First name: " +  counter.firstName +  ", Last Name: " +counter.lastName +"<br />";
 document.getElementById("output").innerHTML = output;
   
}

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

Output:

Create JS Object from JSON String

First name: Rashid, Last Name: Jorvee
First name: Java, Last Name: Script
First name: Node, Last Name: JS

Output on browser console: 

console output on browser debugger console
console output on browser debugger console

at
Labels: , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)