JSON: Origins, Benefits, Use Cases and Resources

In modern web development and software engineering, JSON has become the universal standard for data representation and exchange. But where did it come from? What was used before? And why has it had such a significant impact on the tech world?

🔗 Do you like Techelopment? Check out the website for all the details!

The Origins of JSON

JSON stands for JavaScript Object Notation. It is a lightweight, human-readable format for structuring data. It was introduced in the early 2000s by Douglas Crockford, with the goal of simplifying client-server communication by using a syntax that was already native to JavaScript.

What was used before?

Before JSON became popular, the most commonly used format for data exchange between systems was XML (eXtensible Markup Language). While XML is powerful and flexible, it comes with some drawbacks:

Verbose and harder to read.
Complex parsing logic.
Heavier and less performant for large-scale applications.

The Benefits of JSON

JSON quickly gained popularity because it solved many of XML’s problems. Its advantages include:

Simple and readable syntax: Based on objects and arrays, similar to JavaScript.
Lightweight format: Smaller payload compared to XML.
Fast parsing: Browsers have built-in support to parse JSON quickly.
Language-independent: Supported by nearly all modern programming languages like Python, PHP, Java, Go, C#, and more.

JSON as a Global Standard

Within a few years, JSON became the de facto standard for web APIs. Modern frameworks, libraries, NoSQL databases (like MongoDB), and backend platforms all heavily rely on it.

Today, the majority of web services—from REST APIs to real-time data streams—use JSON to send and receive structured data.

What does a JSON structure look like?

JSON syntax is built upon two primary structures:

Objects – Unordered collections of key-value pairs enclosed in curly braces {}:

{
  "name": "Alice",
  "age": 30
}

Arrays – Ordered lists of values enclosed in square brackets []:

["JavaScript", "Python", "Go"]

Each JSON value can be:

String
Number
Boolean
null
Object
Array

Nested data example:

{
  "user": {
    "name": "Bob",
    "isActive": true,
    "skills": ["HTML", "CSS", "JavaScript"],
    "profile": {
      "age": 25,
      "city": "Berlin"
    }
  }
}

Working with JSON in JavaScript

1. Creating a JSON Object

// Define a JavaScript object
const user = {
  name: "Alice",
  age: 30,
  isAdmin: true,
  skills: ["JavaScript", "React", "Node.js"]
};

// Convert it to a JSON string
const jsonString = JSON.stringify(user);
console.log(jsonString);
// Output: {"name":"Alice","age":30,"isAdmin":true,"skills":["JavaScript","React","Node.js"]}

2. Parsing a JSON string

// JSON string
const data = '{"name":"Bob","age":25,"isAdmin":false}';

// Parse the JSON string into a JavaScript object
const parsedData = JSON.parse(data);
console.log(parsedData.name); // Output: Bob

3. Modifying JSON Data

// Original JSON string
const json = '{"products":[{"id":1,"name":"Laptop"},{"id":2,"name":"Phone"}]}';

// Convert to JavaScript object
const obj = JSON.parse(json);

// Add a new product
obj.products.push({ id: 3, name: "Tablet" });

// Convert back to JSON string
const updatedJson = JSON.stringify(obj, null, 2);
console.log(updatedJson);

Real Example: Calling a JSON API and Handling the Response

To better understand how JSON is used in real applications, here's a simple example of calling a public API and working with the JSON response in JavaScript:

Example of JSON output from the API (an array of objects):

[
  {
    "name": { "common": "Canada" },
    "capital": ["Ottawa"],
    "population": 38005238,
    "flags": {
      "png": "https://flagcdn.com/w320/ca.png"
    }
  }
]

Now let's see how to handle this JSON response:

// Fetching data from a free public API
fetch('https://restcountries.com/v3.1/name/canada')
  .then(response => response.json()) // Parse JSON from the response
  .then(data => {
    // Accessing specific values from the JSON response
    const country = data[0];
    console.log("Country:", country.name.common);
    console.log("Capital:", country.capital[0]);
    console.log("Population:", country.population);
    console.log("Flag URL:", country.flags.png);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

What happens here:

The browser sends a request to the REST Countries API to retrieve information about Canada.
The API responds with a JSON object containing various details.
Using response.json(), we parse the data and access fields like country name, capital, population, and flag image.
This showcases how easy and efficient it is to work with structured data using JSON and JavaScript.

Free Public APIs That Return JSON

Here’s a list of useful online services that provide free JSON-based APIs—perfect for learning, testing, or building your own projects:

🔹 JSONPlaceholder – Fake API for prototyping (posts, comments, users, etc.).
🔹 Public APIs – Directory of free public APIs with categories and descriptions.
🔹 OpenWeatherMap – Real-time weather data (free with signup).
🔹 PokeAPI – Pokémon data (names, types, abilities...).
🔹 REST Countries – Data about countries (flags, populations, currencies...).
🔹 Cat Fact Ninja – Random fun facts about cats!

Conclusion

JSON has transformed the way we communicate with digital systems. Lightweight, readable, and universal, it has become the language of choice for APIs, web apps, mobile apps, and microservices. Whether you're building a simple blog or integrating a complex backend system, JSON will almost certainly play a key role.

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment

Techelopment

Cerca nel blog