JSON, XML and YOU

December 28, 2015 | 4 Minute Read

So, I recently bombed a tech interview

It’s true, I did. I’m pretty new to tech interviews, and I was caught off guard by some of the questions. One question was about the pros and cons of using JSON vs. XML to send and receive data through HTTP requests (in this case, using AJAX), and I gave a vague answer (“JSON is easier to use!”) because I only had a vague understanding. So here’s a post for my edification and yours. And here’s to not bombing the next interview!

JSON

JSON stands for “JavaScript Object Notation”, but the format itself is language agnostic–JSON passes data using simple data structures that all languages have and can parse. JSON is text that can be read by humans, which is handy. As the name suggests, JSON is a JavaScript object literal, similar to a hash or dictionary in other languages. A JSON response to a GET request to mylittlepony.com/information might look like this:

{
  "rainbow dash": "pony",
  "spike": "dragon",
  "canterlot": "Capital of Equestria"
}

Note the quotes around the names/keys (rainbow dash, spike, canterlot): you have to use strings for the names/keys, you can’t use symbols or integers to point to values as you can when using hashes in some other languages. Unlike the names/keys, values don’t have to be strings: arrays, numbers, booleans, strings or null are all valid data types for values in JSON.

{
  "rainbow dash":
    { "species": "pony",
      "type": "pegasus",
      "cutieMark": true,
      "age": 15
    },
  "spike":
    { "species": "dragon",
      "type": null,
      "cutieMark": null,
      "age": 5
    },
  "canterlot":
    { "description": "Capital of Equestria",
      "residents": ["Princess Cadance", "Shining Armor", "Princess Luna", "Princess Celestia"]
    }
}

Because JSON is a JS object, it is simple to parse using JavaScript: simply send the JSON object into a JSON.parse() function, and access parsed data as you would access key/value pairs in any JS object literal.

If you received a JSON object that looked like this:

someResponse = {
  "name": "rainbow dash",
  "age": 15
}

In JavaScript you could access the data like this:

var myPony = JSON.parse(someResponse);

myPony["name"]; // returns "rainbow dash"

XML

XML is short for Extensible Markup Language. XML is also a way to send data around in human readable text format and structured in such away that it is machine readable when parsed. For example:

<pony>
  <name>Rainbow Dash</name>
  <type>Pegaus</type>
  <cutieMark>true</cutieMark>
  <age>15</age>
</pony>

XML is a markup language, like HTML (it adds tags to text to format the text), and the hierarchical structure of XML is key: you can access the text of XML the same way you would access the inner text of a certain HMTL tag or CSS selector, and traverse up and down the XML tree. Using jQuery makes this (relatively) easy.

Which is easier to use?

For my money, JSON. One of the reasons hashes are so great is that they let you access values using specific keys, no iterating through an array (or, in this case, traversing a markup tree) is necessary. Both JSON and XML are human readable, but I think JSON reads easier since it doesn’t include extraneous text (like the closing tags that XML needs, or repetitive tags that JSON makes unnecessary since data can be put in an array and pointed to it with one name/key). And if you are using JS, you can use the native JSON.parse() function and you are done. With XML, as far as I am aware you need to use a third party library like jQuery to parse the XML and then traverse the XML tree until you get what you need.