What Is Difference Between JSON and XML With Example

admin_img Posted By Bajarangi soft , Posted On 08-10-2020

JSON is a format for storing and transporting data.JSON is often used when data is sent from a server to a web page.

What Is Difference Between JSON and XML With Example

Both JSON and XML can be used to receive data from a web server.


The following JSON and XML examples both define an employees object, with an array of 3 employees:

JSON Example

{"employees":[
{ "firstName":"John", "lastName":"Doe" },
{ "firstName":"Anna", "lastName":"Smith" },
{ "firstName":"Peter", "lastName":"Jones" }
]}
 

XML Example

<employees>
    <employee>
        <firstName>John</firstName> <lastName>Doe</lastName>
    </employee>
    <employee>
        <firstName>Anna</firstName> <lastName>Smith</lastName>
    </employee>
    <employee>
        <firstName>Peter</firstName> <lastName>Jones</lastName>
    </employee>
</employees>


 

JSON is Like XML Because

  • Both JSON and XML are "self describing" (human readable)

  • Both JSON and XML are hierarchical (values within values)

  • Both JSON and XML can be parsed and used by lots of programming languages

  • Both JSON and XML can be fetched with an XMLHttpRequest

 

JSON is Unlike XML Because

  • JSON doesn't use end tag

  • JSON is shorter

  • JSON is quicker to read and write

  • JSON can use arrays

The biggest difference is:

 XML has to be parsed with an XML parser. JSON can be parsed by a standard JavaScript function.

 

Why JSON is Better Than XML

XML is much more difficult to parse than JSON.
JSON is parsed into a ready-to-use JavaScript object.

 

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


Complete Code For JSON In JavaScript.

<!DOCTYPE html>
<html>
<head>
    <title>What Is Difference Between JSON and XML With Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>

<body>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: tomato">What Is Difference Between JSON and XML With Example</h1>
    </div>
    <br>


    <div class="well">
        <h2 id="demo1"></h2>
    </div>


    <script>
        var myObj, i, j, x = "";

        myObj = {
            "employees": [
                {"firstName":"Ford", "lastName":["Doe", "Smith" ]},
                {"firstName":"BMW", "lastName":["Jones", "S"]},
                {"firstName":"Fiat", "lastName":["Doe", "Panda"] }
            ]
        }
        for (i in myObj.employees) {
            x += "<h2>" + myObj.employees[i].firstName + "</h2>";
            for (j in myObj.employees[i].lastName) {
                x += myObj.employees[i].lastName[j] + "<br>";
            }
        }
        document.getElementById("demo1").innerHTML = x;
    </script>
</div>
</body>
</html>

Related Post