JSON as an alternative to XML in AJAX / Web Services Requests

3 min readJan 22, 2021

JSON (JavaScript Object Notation) “is a lightweight data-interchange format.” — json.org

JSON is used primarily to receive and transmit data from a server and is characterized by key-values/objects. Keys being a string enclosed in quotation marks and values: strings, numbers, booleans, arrays, or objects.

The JSON syntax is built on two structures: arrays and objects. Objects which can also contain arrays or key-value pairs (as mentioned above):

[{
  "name": "Biscuit",
  "age": 7,
  "breed": "frenchie",
  "owner": {
    "name": "Daisy",
    "homeTown": "Philadelphia"
    ...
  },
  "hobbies": [
    sleeping, 
    eating,
    ...
  ],
},
{
  "name": "Lola",
  "age": 2,
  "breed": "chihuahua",
...
}]Above see a collection of JSON objects, these are specific dog objects within an array of dogs.

Pretty much every modern programming language has a way to convert a JSON string into an object it can work with. Even our browsers can do this. It’s extremely important, however, that when writing JSON we implement and follow the correct syntax rules and format in order to be able to properly parse the data. Remember that computers and software can’t read minds…well at least not yet!

Where is JSON used?

Web services
As the name implies, in JavaScript!

Note: While it derives from JavaScript, JSON is language-independent, many programming languages include code to generate and parse JSON-format data therefore it is also supported by most backend technologies.

Why use JSON?

Convenience & efficiency in comparison to XML. JSON is easier for developers and computers alike to to read, write, and parse.
It’s lightweight thus faster and cost efficient.
Using JSON.parse()—JavaScript’s built in function to convert a string written in JSON format — we can rapidly turn JSON text into a JavaScript object.
While XML data is typeless, JSON objects have a type that we can easily access.

How do we use or implement JSON?

In light of the highly anticipated COVID vaccine let’s say we wanted to create a simple React app to display the different centers offering the vaccine. Doing this will require the fetching of vaccination locations from some sort of API (let’s pretend one exists).

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      locations: []
    };
  }

  componentDidMount() {
    fetch("https://api.example.com/vaccinationlocations")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            locations: result.locations
          });
        },
      )
  }

  render() {
      return (
        <ul>
          {locations.map(location => (
            <li key={location.objectid}>
              {location.facility_name} -   
              {location.address} ... 
            </li>
          ))}
        </ul>
      );
    }
  }
}

With access to the dataset we can now easily filter, query and aggregate data to our application.

Behind the scenes in JSON: {
  ...
  "locations": [
    {
      "objectid": "1",
      "service_category": "Vaccines",
      "service_type": "COVID Vaccine",
      "walk_in": "Yes",
      "insurance": "Yes",
      "facility_name": "Duane Reade",
      "address": "37 BROADWAY NEW YORK,NY 10006",
      "phone": "212-425-8460",
      "website": {
        "url": "https://www.walgreens.com/topic/duane-reade/duane-reade.jsp"
      },
      "more_information": "Call location for hours"
    },
    ...
  ]
}

As you can see the beauty of working with JSON is that we can very quickly and easily convert data into objects with properties ready for us to use and display!

Just like we can convert JSON to JavaScript we can also convert a JavaScript object to JSON using the stringify method. The JSON.stringify() method converts a JavaScript object or value into a JSON string.

JSON.stringify(value[, replacer[, space]]) -->JSON.stringify(locations) * My locations were converted back into a JSON string.

To learn more about the JSON.stringify() method (including the optional replacer and space functions) visit: https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

Thank you for reading! :)

JSON as an alternative to XML in AJAX / Web Services Requests

Written by Damely Tineo