The Ultimate JSON Tutorial, from the Basics to Real-World Use Cases in 2024

Introudction

What's JSON: The Basics

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

[23, 21, 33, "Alice", "Bob", true]

Accessing JSON Data in JavaScript

Getting JSON Data Using String Index and Key Directly

const obj = {"name": "Alice"};
const name = obj["name"]; // using string index notation
const name = obj.name; // using the key directly

Getting JSON Data Using an Unknown Key

const variableKey = "dynamicKey";
const value = obj[variableKey];

Getting JSON Data by Key Path

let obj = { };
console.log(obj.key1.key2); // Cannot read properties of undefined (reading 'key2')

console.log(obj && obj.key1 && obj.key1.key2); // undefined (no error)

import _ from 'lodash'; // or using 'underscore'
console.log(_.get(obj, 'key1.key2')); // undefined (no error)

console.log(obj?.key1?.key2); // undefined (no error)

Looping Through a JSON Object

const jsonObj = {
  name: 'John',
  age: 30,
  city: 'New York'
};

for (let key in jsonObj) {
  const value = jsonObj[key];
  console.log(key, value);
}

_.forEach(obj, function(value,key) {
    console.log(key, value)
});

Looping Through a JSON Array

const jsonArray = [
  { name: 'John', age: 30, city: 'New York' },
  { name: 'Alice', age: 25, city: 'Los Angeles' },
];

for (let index = 0; index < jsonArray.length; index++) {
  const item = jsonArray[i];
  console.log(index, item);
}

jsonArray.forEach((item, index) => {
  console.log(index, item);
});

Manipulate JSON Data in JavaScript

Defining an Object with Static Keys

const obj = { "key1": 1 };

Defining an Object with Dynamic Keys

const variableKey = 'dynamicKey';
const obj = { [variableKey]: 1 };

Dynamically Adding a Property to an Existing Object

const obj = { key1: 1 }; // existing object
obj.key2 = 2; // dot notation
obj['key3'] = 'value'; // square brackets

Removing a Key from an Object

const obj = { "key1": 1 };
delete obj.key1;

Merging Two Objects

const object1 = {"a": 1};
const object2 = {"b": 2};
const mergedObject = { ...object1, ...object2 }; // {"a": 1, "b": 2}

Serialization and Deserialization of JSON in JavaScript

JSON is a popular format for representing and transmitting data between a server and a client. Serialization allows you to convert JavaScript objects into a JSON string that can be easily sent to the server. Deserialization, on the other hand, helps you convert received JSON data back into JavaScript objects for processing on the client-side.

Data Interchange Between Browser and Server

const json = {
  "name": "Alice",
  "age": 30,
};
JSON.stringify(json); // returns string: '{"name":"Alice","age":30}'

JSON Serialization: Using More Efficient and Safer JSON Utility

JSON Deserialization: Using Standard JavaScript Utility

const str = '{"name":"Alice","age":30}';
JSON.parse(str); // returns json object: {"name":"Alice","age":30}

JSON Deserialization: Using More Efficient and Safer JSON Utility

Real-World Use Cases of JSON

JSON and NoSQL Databases

Use Case 1: Store Extra User Profiles

// Example using MongoDB and Node.js
const MongoClient = require('mongodb').MongoClient;
const url = 'mongodb://localhost:27017'; // Database connection URL

MongoClient.connect(url, (err, client) => {
  if (err) throw err;

  const db = client.db('mydatabase'); // Use your database name
  const collection = db.collection('userProfiles'); // Use your collection name

  // JSON user profile data
  const user1 = {
    "username": "bob",
    "age": 30,
    "email": "bob@example.com",
  };
  const user2 = {
    "username": "alice",
    "age": 31,
  };

  // Insert the user profiles into the collection
  collection.insertOne(user1);
  collection.insertOne(user2);
});

Use Case 2: Find Article via Tag in Blog System

const MongoClient = require('mongodb').MongoClient;
const url = 'mongodb://localhost:27017'; // Database connection URL

MongoClient.connect(url, (err, client) => {
  if (err) throw err;

  const db = client.db('mydatabase'); // Use your database name
  const collection = db.collection('articles'); // Use your collection name

  // Example JSON data with unstructured and semi-structured content
  const article1 = {
    "title": "Introduction to NoSQL Databases",
    "author": "John Doe",
    "content": "NoSQL databases come in many varieties, each designed for specific use cases."
  };

  const article2 = {
    "title": "Exploring JSON",
    "author": "Jane Smith",
    "content": "JSON is a popular format, known for its flexibility. See http://json-5.com"
  };

  const article3 = {
    "title": "Web Development Best Practices",
    "author": "Robert Johnson",
    "content": "In modern web development, best practices emphasize security, scalability, and user experience.",
    "tags": ["web development", "best practices", "security"]
  };

  // Insert articles into the collection
  collection.insertMany([article1, article2, article3]);

  // Query and retrieve articles by tag
  collection.find({ tags: "web development" }).toArray((err, articles) => {
    console.log(articles)
  });
});

Use Case 3: NOSQL Integration with RESTful APIs

const express = require('express');
const { MongoClient } = require('mongodb');
const app = express();
const port = 3000; // Replace with your desired port

// MongoDB connection URL
const mongoUri = 'mongodb://localhost:27017';

// Connect to MongoDB
MongoClient.connect(mongoUri, { useUnifiedTopology: true })
  .then(client => {
    console.log('Connected to MongoDB');
    const db = client.db('mydatabase'); // Use your database name
    const collection = db.collection('data'); // Use your collection name

    // Middleware for parsing JSON data in requests
    app.use(express.json());

    // Define a route to retrieve data from MongoDB
    app.get('/api/data', async (req, res) => {
      const data = await collection.find({}).toArray();
      res.json(data);
    });

    app.listen(port, () => {
      console.log("Server is running");
    });
  })
  .catch(err => {
    console.error('Error connecting to MongoDB:', err);
  });

Conclusion