This site is mobile accessible. Press the "Tap Here" button to use a different font-size.

Smartphone icons created by Freepik - Flaticon

18.3 JSON vs XML

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

JavaScript Fundamentals course home
Module 18. JS JSON

Navigate this module

Eventually the navigation links, above, will be replaced by these << (previous) and >> (next) buttons below.

JavaScript icons used in the buttons provided by ICONS8.COM. Smartphone icons created by Freepik - Flaticon

Example files created in this module:
JSON Syntax - Access a JavaScript object part 1 JSON Syntax - Access a JavaScript object part 2 JSON Syntax - Modify a JavaScript Object part 1 JSON Syntax - Modify a JavaScript Object part 2 JSON Parse - Parsing JSON JSON Parse - JSON From the Server JSON Parse - Array as JSON JSON Parse - Parsing Dates part 1 JSON Parse - Parsing Dates part 2 JSON Parse - Parsing Dates part 3 JSON Stringify - Stringify a JavaScript Object part 1 JSON Stringify - Stringify a JavaScript Object part 2 JSON Stringify - Storing data in local storage JSON Stringify - Stringify Dates JSON Stringify - Stringify Functions part 1 JSON Stringify - Stringify Functions part 2 JSON Objects - Creating an Object from a JSON Literal part 1 JSON Objects - Creating an Object from a JSON Literal part 2 JSON Objects - Access a JavaScript Object part 1 JSON Objects - Access a JavaScript Object part 2 JSON Objects - Looping an Object part 1 JSON Objects - Looping an Object part 2 JSON Arrays - Create JavaScript Arrays JSON Arrays - Create JavaScript Arrays part 2 JSON Arrays - Accessing Array Values JSON Arrays - Accessing Array Values in Objects JSON Arrays - Looping Through an Array JSON Server - Sending Data to a Server JSON Server - Receiving Data from a Server JSON Server - JSON From a Server JSON Server - JSON returned from a server as an array: JSON Server - Get JSON Data from a PHP Server part 1 JSON Server - Get JSON Data from a PHP Server part 2 JSON Server - Get JSON Data from a PHP Server part 3 JSON Server - Get JSON Data from a PHP Server part 4 JSON Server - Get JSON Data from a PHP Server part 5 JSON HTML - Make a table based on JSON data JSON JSONP - Request JSON using the script tag JSON JSONP - Dynamic Script Tag JSON JSONP - Callback Function