Ajax: Parsing and Reading JSON files

Sep 15, 2014 • javascript

Recently we looked into how can we read an XML file using Ajax. Now let us see how to do the same with JSON files. Actually Ajax can read any text file. The trick is to know how to parse the files in such a way that we can extract out information we need easily. JSON is a widely used data interchange format. It is very easy for the browsers to parse and generate and is based on JavaScript programming language. Now let us look into how can we parse a JSON file using Ajax:

A sample JSON file will be similar to something like this:

``{“employees”:[ {“firstName”:”John”, “lastName”:”Doe”}, {“firstName”:”Anna”, “lastName”:”Smith”}, {“firstName”:”Peter”, “lastName”:”Jones”} ]}

This could be a sample JSON file.  Now let us see how can we parse and read the contents from JSON file and print only the content that we wants. In the modern day browsers, parsing JSON is very simple. Modern browsers supports parse command which can be used to Parse a JSON file and save it to a variable. Let us see how can we do this:

    var request = new XMLHttpRequest();
    request.open('GET', 'info.json');
    request.onreadystatechange = function() {
      if((request.readyState===4) && (request.status===200))
      {
        var items = JSON.parse(request.responseText);
      }
    }
    request.send();

Parsing JSON is as simple as above.  All most all modern browsers will support JSON.parse method so parsing JSON is much simpler now a days.. Now let us see how we can print the result in a list:

    var request = new XMLHttpRequest();
    request.open('GET', 'info.json');
    request.onreadystatechange = function() {
      if((request.readyState===4) && (request.status===200))
      {
        var items = JSON.parse(request.responseText);
        var out = '<ul>';
        for (var key in items)
        {
          out += '<li>' +items[key].name + '</li>';
        }
      out += '</ul>';
      document.getElementByID('id').innerHTML = out;
      }
    }
    request.send();

This will add the parsed JSON elements to the webpage. Even though Ajax was originally designed to work with XML files, it can work with JSON and other formats as well and sometimes  the process is simpler than processing XML. As you can see here, parsing and reading JSON was much simpler than XML.

Anirudh Anand

Head of Product Security & DevSecOps at @CRED_club | Application Security ♥ | CTF lover - @teambi0s | Security Trainer - @7asecurity | certs - eWDP, OSCP, OSWE