Mavengers

JSON Example reads a menu from myTutorials.txt, and displays the menu in a web page

<div id="id01"></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var myArr = JSON.parse(xmlhttp.responseText);
        myFunction(myArr);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}
</script>

Older browsers without the support for the JavaScript function JSON.parse() can use the eval() function to convert a JSON text into a JavaScript object:

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

var obj = eval ("(" + text + ")");

JSON Data can be modified like

first entry in the JavaScript object array can be accessed like

JSON vs XML

For AJAX applications, JSON is faster and easier than XML:

Using XML

Fetch an XML document
Use the XML DOM to loop through the document
Extract values and store in variables

Using JSON

Fetch a JSON string
JSON.Parse the JSON string

JSON Object Creation in JavaScript

<!DOCTYPE html>
<html>
<body>

<h2>JSON Object Creation in JavaScript</h2>

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

<script>
var text = '{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}'

var obj = JSON.parse(text);

document.getElementById("demo").innerHTML =
obj.name + "<br>" +
obj.street + "<br>" +
obj.phone;
</script>

</body>
</html>

JSON Object Creation in JavaScript

What is JSON

JSON stands for JavaScript Object Notation
JSON is a lightweight data-interchange format
JSON is language independent *
JSON is "self-describing" and easy to understand

Mavengers

Monday, February 23, 2015

JSON Example reads a menu from myTutorials.txt, and displays the menu in a web page

Older browsers without the support for the JavaScript function JSON.parse() can use the eval() function to convert a JSON text into a JavaScript object:

JSON Data can be modified like

first entry in the JavaScript object array can be accessed like

JSON vs XML

JSON Object Creation in JavaScript

JSON Object Creation in JavaScript

What is JSON

Blog Archive

About Me