The Role of JSON in Web-Application Development

Introduction

JSON stands for Javascript Object Notation. It is a text-based format for representing structured data, and is commonly used for data interchange over a network (between client and server).

If you are a web-developer, then you have undoubtedly used JSON. If not, you must immediately learn about JSON before time catches up with you.

JSON is a string, which follows the Javascript Object syntax. For example:

Javascript object - {firstname: “Richard”, lastname: “Orama”}
JSON - '{“firstname”: “Richard”, “lastname”: “Orama”}' //this is a string, so it should be in single quotes overall

Please note the obvious “name: value” pairs and the difference in quotes around the names above between JSON and Javascript object. The names in JSON are double-quoted, whereas it is not the case with Javascript object.

As a data interchange format, JSON can be used for sending data from client to server for processing, as well as sending data from server to client for display. Bring back memories of HTTP request and response immediately.

JSON can be nested (and deeply-nested too), so it offers a way to represent complex data, with many practical use-cases.

The creation of a JSON string is a serialization process. To access JSON in Javascript, one needs to convert it to native Javascript object using the Javascript JSON object (deserialization). To handle JSON on the server, every programming language has appropriate libraries for doing so.

In the context of data storage, serialization is the process of translating data structures or object state into a format that can be stored (for example, in a file or memory buffer) or transmitted and reconstructed (deserialized) later. Converting data to JSON is a serialization process. Reading (parsing) the data later is deserialization.

It is important to master how to read (parse) and create JSON on the client and server sides. I will now give you some examples using Flask backend and Vanilla Javascript.


Client

Create JSON: JSON.stringify(javascriptObject)
Read JSON: JSON.parse(jsonString). We can also convert a JSON string to Javascript object using the json() method of the Response interface.


Server

Create JSON: json.dumps(dictObject), or specifically for Flask, you can use jsonify(dictObject)
Read JSON: request.get_json(), but mimetype must be application/json; if query string was used, then request.get.args(); if formdata was used, then request.form.get()


Snippet (Client – Create and Read JSON)

let data = {firstname: “Richard”, lastname: “Orama”}; //javascript object
fetch(url, {
		method: 'POST',
		headers: {
			'Content-Type': 'application/json',
			'X-Source-From-Fetch': 'True',
		},
		body: JSON.stringify(data), //CREATE JSON (serialize)
	})
	.then(response => response.json()) //READ JSON //de-serialize/parse json to javascript object, can now access using response["key"] or response.key
	.then(data => {
	//do something
	})
	.catch((error) => {
		console.error('Error:', error);
	});

Snippet (Server – Read and Create JSON)

request_data = request.get_json() #READ JSON
if ‘firstname’ in request_data:
firstname = request_data[‘firstname’]
if ‘lastname’ in request_data:
lastame = request_data[‘lastname’]
…
return jsonify({‘result’: ‘OK’}) #CREATE JSON - could use the generic Python json.dumps()

If you are programming in any other backend language, it should still be pretty easy to follow along from the above examples.