XML and JSON.js

JSON is better than XML and vise versa, find out more?

Posted by Rishi Raj Gujadhur 7/5/2016

Prerequisites

xml vs json

JSON = Javascript object notation.
JSON is an easier to use alternative to XML.

XML code:

<Employee>
<firstName>Paul</firstName>
<lastName>Grover</lastName>
<gender>Male</gender>
</employee>

JSON code:

var employeeJSON = {
"firstName": "Paul",
"lastName": "Grover",
"gender": "Male"
};

Notice that the JSON code is much shorter than the XML code, moreover property names and thier values are seperated by a : semicolon in JSON.

XML code vs JSON code

What StakeOverflow users say:

JSON

Pro:

Simple syntax, which results in less "markup" overhead compared to XML.

JSON is both more compact and (in my view) more readable - in transmission it can be "faster" simply because less data is transferred.

Easy to use with JavaScript as the markup is a subset of JS object literal notation and has the same basic data types as JavaScript.

JsonPath for extracting information in deeply nested structures

Con:

Simple syntax, only a handful of different data types are supported.

XML

Pro:

XML Schema for datatype, structure validation. Makes it also possible to create new datatypes

XSLT for transformation into different output formats

XPath/XQuery for extracting information in deeply nested structures

built in support for namespaces

Con:

Relatively wordy compared to JSON (results in more data for the same amount of information).

http://stackoverflow.com/questions/4862310/json-and-xml-comparison

Reading json

Lets use the same code we previously looked at:

var employeeJSON = {
"firstName": "Paul",
"lastName": "Grover",
"Gender": "Male"
};

To retrieve and store the firstName's property value into a variable, type:

var firstName = employee.JSON.firstName;

Displaying the JSON data on a web page:

<html>
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script >
        $(document).ready(function () {

            // Creating a JSON object
            var employeeJSON = {
                "firstName": "Paul",
                "lastName": "Grover",
                "gender": "Male",
          
            };
            // Retriving data from the JSON object that we previously created
            var result = employeeJSON.firstName;
          
            $('#resultDiv').html(result);
        });
    </script>
</head>
<body>
    <div id="resultDiv"></div>
</body>
</html>

Notice that we used the code: $('#resultDiv').html(result); to append the JSON data to a div with the id "resultDiv" which we created in the body section.

Result on the webpage: Paul

cREATING A JSON ARRAY

If we want to store data multiple for multiple objects; i.e multiple employees then we can use a JSON array since a JSON array can contain multiple objects.

Example of a JSON array:

var employeesJSON = [
{
    "firstName": "Tom",
    "lastName": "Baker"
},
{
    "firstName": "Sara",
    "lastName": "Grover"
}];

Notice that

We used [ ] square brackets to specify that we are making an array of objects

We used curly braces { }, to seperate each object (employee)

Another way of achieving the same result without creating an array, is using a nested JSON object:

var employeesJSON = {
    "Tom": {
        "firstName": "Tom",
        "lastName": "Baker",
    },
    "Sara": {
        "firstName": "Sara",
        "lastName": "Grover"
    }
};

Notice that here:

We seperated each object (employee) by using their name as follows "Tom":{ ... } , "Sara:" {...}

Retriving nested data from a nested JSON object.

Type the following code to retrive and store the last name of the employee Tom to a variable.

var result = employeesJSON.Tom.lastName;