← Fetch API LocalStorage & SessionStorage →

JSON in JavaScript

JSON (JavaScript Object Notation) is a lightweight data interchange format that's easy for humans to read and write, and easy for machines to parse and generate.

🤔 What is JSON?

JSON is a text-based data format following JavaScript object syntax, but it's language-independent. It's commonly used for transmitting data in web applications.

Text-based - Easy to read and write
Language-independent - Works with any programming language
Lightweight - Minimal syntax overhead
Standardized - RFC 8259 specification

💡 JSON Syntax Rules

Data is in name/value pairs
Data is separated by commas
Curly braces hold objects
Square brackets hold arrays
Strings must use double quotes

What JSON Doesn't Support

Functions, dates, undefined, Infinity, NaN, and comments are not valid JSON. They need special handling when converting.

📝 JSON Basics: Parse & Stringify

The two main JSON methods in JavaScript: JSON.parse() and JSON.stringify()

JavaScript Editor

// JSON (JavaScript Object Notation) basics
// JSON is a text format for storing and transporting data

// Valid JSON examples:
const jsonString = `{
  "name": "John Doe",
  "age": 30,
  "isStudent": false,
  "courses": ["Math", "Science", "History"],
  "address": {
    "street": "123 Main St",
    "city": "New York"
  }
}`;

// Parse JSON string to JavaScript object
const person = JSON.parse(jsonString);
console.log('Parsed object:', person);
console.log('Name:', person.name);
console.log('First course:', person.courses[0]);
console.log('City:', person.address.city);

// Convert JavaScript object to JSON string
const newPerson = {
  name: 'Alice Smith',
  age: 25,
  hobbies: ['reading', 'coding', 'gaming'],
  education: {
    degree: 'B.Tech',
    year: 2020
  }
};

const jsonOutput = JSON.stringify(newPerson);
console.log('\nJSON string:', jsonOutput);

// Pretty print with indentation
const prettyJson = JSON.stringify(newPerson, null, 2);
console.log('\nPretty JSON:');
console.log(prettyJson);

Key Methods:

JSON.parse(text) - Converts JSON string to JavaScript object
JSON.stringify(value) - Converts JavaScript object to JSON string
JSON.stringify(value, replacer, space) - With formatting options

🔧 Advanced Parse & Stringify

Using replacer and reviver functions for custom serialization.

JavaScript Editor

// JSON.parse() and JSON.stringify() deep dive
const complexData = {
  name: "Data Example",
  created: new Date(),
  scores: [95, 87, 92, null],
  metadata: {
    tags: ['important', 'test'],
    active: true
  },
  // Functions and undefined are not included in JSON
  calculate: function() { return 100; },
  secret: undefined,
  // Infinity and NaN become null in JSON
  infinityValue: Infinity,
  nanValue: NaN
};

console.log('Original object:', complexData);
console.log('Has function?', typeof complexData.calculate);
console.log('Has undefined?', 'secret' in complexData);

// Convert to JSON string
const jsonString = JSON.stringify(complexData);
console.log('\nJSON string:', jsonString);

// Parse back to object
const parsedData = JSON.parse(jsonString);
console.log('\nParsed object:', parsedData);
console.log('Has function after parse?', typeof parsedData.calculate);
console.log('Has undefined after parse?', 'secret' in parsedData);
console.log('Date became:', typeof parsedData.created);
console.log('Infinity became:', parsedData.infinityValue);
console.log('NaN became:', parsedData.nanValue);

// Using reviver and replacer functions
const withReplacer = JSON.stringify(complexData, (key, value) => {
  // Replacer function can filter or transform values
  if (key === 'metadata') {
    return { ...value, modified: true };
  }
  if (typeof value === 'number') {
    return value * 2; // Double all numbers
  }
  return value;
}, 2);

console.log('\nWith replacer:');
console.log(withReplacer);

// Using reviver when parsing
const revived = JSON.parse(withReplacer, (key, value) => {
  // Reviver function can transform values when parsing
  if (key === 'created' && typeof value === 'string') {
    return new Date(value);
  }
  if (typeof value === 'number' && key !== 'age') {
    return value / 2; // Reverse the doubling
  }
  return value;
});

console.log('\nRevived object:', revived);

Replacer Function:

Controls what gets stringified and can transform values

Reviver Function:

Transforms values when parsing JSON string back to object

✅ JSON Validation

Validating JSON strings and implementing schema validation.

JavaScript Editor

// JSON validation and error handling
const validJSON = '{"name": "John", "age": 30}';
const invalidJSON = '{name: John, age: 30}'; // Missing quotes
const malformedJSON = '{"name": "John", "age": 30'; // Missing closing brace
const deepJSON = `{
  "users": [
    {
      "id": 1,
      "profile": {
        "settings": {
          "theme": "dark"
        }
      }
    }
  ]
}`;

// Test parsing
console.log('Valid JSON:', safeParse(validJSON));
console.log('Invalid JSON:', safeParse(invalidJSON, { error: 'invalid' }));
console.log('Malformed JSON:', safeParse(malformedJSON));
console.log('Deep JSON:', safeParse(deepJSON));

// JSON Schema validation (conceptual)
function validateJSONSchema(json, schema) {
  const errors = [];
  
  if (schema.required) {
    schema.required.forEach(field => {
      if (!(field in json)) {
        errors.push(`Missing required field: ${field}`);
      }
    });
  }
  
  if (schema.properties) {
    Object.entries(schema.properties).forEach(([field, type]) => {
      if (field in json) {
        if (type === 'string' && typeof json[field] !== 'string') {
          errors.push(`${field} should be a string`);
        } else if (type === 'number' && typeof json[field] !== 'number') {
          errors.push(`${field} should be a number`);
        } else if (type === 'boolean' && typeof json[field] !== 'boolean') {
          errors.push(`${field} should be a boolean`);
        } else if (type === 'array' && !Array.isArray(json[field])) {
          errors.push(`${field} should be an array`);
        } else if (type === 'object' && (typeof json[field] !== 'object' || Array.isArray(json[field]))) {
          errors.push(`${field} should be an object`);
        }
      }
    });
  }
  
  return {
    valid: errors.length === 0,
    errors
  };
}

// Define schema
const userSchema = {
  required: ['name', 'email'],
  properties: {
    name: 'string',
    email: 'string',
    age: 'number',
    isActive: 'boolean',
    tags: 'array'
  }
};

// Test data
const testUsers = [
  { name: 'John', email: 'john@example.com', age: 30, isActive: true, tags: ['user'] },
  { name: 'Jane', age: 25 }, // Missing email
  { name: 'Bob', email: 123, age: 'thirty' }, // Wrong types
  { name: 'Alice', email: 'alice@example.com', tags: {} } // tags should be array
];

console.log('\n=== Schema Validation ===');
testUsers.forEach((user, index) => {
  const result = validateJSONSchema(user, userSchema);
  console.log(`User ${index + 1}:`, result.valid ? '✅ Valid' : '❌ Invalid');
  if (result.errors.length > 0) {
    console.log('Errors:', result.errors);
  }
});

Common JSON Errors:

Missing quotes around property names
Trailing commas
Single quotes instead of double quotes
Comments (not allowed in JSON)
Missing closing brackets/braces

💾 Practical Example: Storage Manager

Building a storage manager that uses JSON for local storage operations.

JavaScript Editor

// Practical Example: Local Storage with JSON
class JSONStorage {
  constructor(storageKey, initialData = {}) {
    this.storageKey = storageKey;
    this.data = this.load() || initialData;
  }
  
  load() {
    try {
      const stored = localStorage.getItem(this.storageKey);
      return stored ? JSON.parse(stored) : null;
    } catch (error) {
      console.error('Error loading from storage:', error);
      return null;
    }
  }
  
  save() {
    try {
      localStorage.setItem(this.storageKey, JSON.stringify(this.data, null, 2));
      return true;
    } catch (error) {
      console.error('Error saving to storage:', error);
      return false;
    }
  }
  
  get(key) {
    return key ? this.data[key] : this.data;
  }
  
  set(key, value) {
    if (typeof key === 'object') {
      // If key is an object, merge it
      this.data = { ...this.data, ...key };
    } else {
      this.data[key] = value;
    }
    this.save();
  }
  
  remove(key) {
    delete this.data[key];
    this.save();
  }
  
  clear() {
    this.data = {};
    this.save();
  }
  
  // Advanced: Deep merge
  deepMerge(newData) {
    function isObject(item) {
      return item && typeof item === 'object' && !Array.isArray(item);
    }
    
    function deepMerge(target, source) {
      if (isObject(target) && isObject(source)) {
        for (const key in source) {
          if (isObject(source[key])) {
            if (!target[key]) Object.assign(target, { [key]: {} });
            deepMerge(target[key], source[key]);
          } else {
            Object.assign(target, { [key]: source[key] });
          }
        }
      }
      return target;
    }
    
    this.data = deepMerge(this.data, newData);
    this.save();
  }
}

// Usage example
console.log('=== JSON Storage Demo ===');

// Create storage instance
const userSettings = new JSONStorage('user_settings', {
  theme: 'light',
  language: 'en',
  notifications: true,
  preferences: {
    fontSize: 14,
    autoSave: true
  }
});

console.log('Initial settings:', userSettings.get());

// Update settings
userSettings.set('theme', 'dark');
userSettings.set('notifications', false);
userSettings.set('preferences.fontSize', 16); // Won't work with flat set

console.log('\nAfter updates:', userSettings.get());

// Use deep merge for nested objects
userSettings.deepMerge({
  preferences: {
    fontSize: 18,
    showLineNumbers: true
  },
  newSetting: 'value'
});

console.log('\nAfter deep merge:', userSettings.get());

// Complex data storage
const appData = new JSONStorage('app_data');

// Store different types of data
appData.set('users', [
  { id: 1, name: 'John', lastLogin: new Date().toISOString() },
  { id: 2, name: 'Jane', lastLogin: new Date().toISOString() }
]);

appData.set('stats', {
  totalLogins: 42,
  activeUsers: 2,
  dailyAverage: 4.2
});

appData.set('cache', {
  'api/users': {
    data: [{ id: 1, name: 'Cached John' }],
    timestamp: Date.now(),
    expiresIn: 3600000
  }
});

console.log('\nApp Data:', JSON.stringify(appData.get(), null, 2));

// Simulate API response handling
async function fetchAndStoreData() {
  try {
    // Simulate API call
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    const data = await response.json();
    
    // Store with metadata
    appData.set('apiCache', {
      [`post_${data.id}`]: {
        data,
        fetchedAt: new Date().toISOString(),
        ttl: 300000 // 5 minutes
      }
    });
    
    console.log('\nStored API data:', appData.get('apiCache'));
    
    // Check if data is still valid
    const cached = appData.get('apiCache')[\`post_\${data.id}\`];
    const cacheAge = Date.now() - new Date(cached.fetchedAt).getTime();
    const isValid = cacheAge < cached.ttl;
    
    console.log(`Cache age: ${cacheAge}ms, Valid: ${isValid}`);
    
  } catch (error) {
    console.error('API Error:', error);
  }
}

// Uncomment to test API fetch
// fetchAndStoreData();

💡 Real-world Uses:

API request/response data
Configuration files
Local storage/session storage
Data persistence
Inter-process communication
Log files

🔍 Deep JSON Operations

Advanced utilities for working with deep/nested JSON structures.

JavaScript Editor

// Deep JSON operations and utilities
const deepData = {
  company: {
    name: "Tech Corp",
    departments: {
      engineering: {
        employees: [
          { id: 1, name: "Alice", skills: ["JavaScript", "React"] },
          { id: 2, name: "Bob", skills: ["Python", "Django"] }
        ],
        projects: ["Web App", "Mobile App"]
      },
      marketing: {
        employees: [
          { id: 3, name: "Charlie", skills: ["SEO", "Content"] }
        ],
        budget: 50000
      }
    },
    settings: {
      theme: "dark",
      features: {
        chat: true,
        notifications: {
          email: true,
          push: false
        }
      }
    }
  }
};

// Deep clone using JSON (loses functions, dates, etc.)
const deepClone = JSON.parse(JSON.stringify(deepData));
console.log('Deep clone:', deepClone);
console.log('Are they equal?', deepData.company.name === deepClone.company.name);
console.log('Are they same object?', deepData === deepClone);

// Deep get function
function deepGet(obj, path, defaultValue = undefined) {
  const keys = path.split('.');
  let current = obj;
  
  for (const key of keys) {
    if (current === null || current === undefined || typeof current !== 'object') {
      return defaultValue;
    }
    current = current[key];
  }
  
  return current !== undefined ? current : defaultValue;
}

// Deep set function
function deepSet(obj, path, value) {
  const keys = path.split('.');
  let current = obj;
  
  for (let i = 0; i < keys.length - 1; i++) {
    const key = keys[i];
    if (!(key in current) || typeof current[key] !== 'object') {
      current[key] = {};
    }
    current = current[key];
  }
  
  current[keys[keys.length - 1]] = value;
  return obj;
}

// Deep merge function
function deepMerge(target, ...sources) {
  if (!sources.length) return target;
  const source = sources.shift();
  
  if (isObject(target) && isObject(source)) {
    for (const key in source) {
      if (isObject(source[key])) {
        if (!target[key]) Object.assign(target, { [key]: {} });
        deepMerge(target[key], source[key]);
      } else {
        Object.assign(target, { [key]: source[key] });
      }
    }
  }
  
  return deepMerge(target, ...sources);
}

function isObject(item) {
  return item && typeof item === 'object' && !Array.isArray(item);
}

// Test deep operations
console.log('\n=== Deep Operations ===');
console.log('Deep get company.departments.engineering.employees[0].name:',
  deepGet(deepData, 'company.departments.engineering.employees.0.name'));

console.log('Deep get non-existent path:',
  deepGet(deepData, 'company.nonexistent.path', 'Default Value'));

// Create a copy for modification
const modifiedData = JSON.parse(JSON.stringify(deepData));
deepSet(modifiedData, 'company.departments.engineering.manager', 'David');
deepSet(modifiedData, 'company.settings.features.notifications.sound', true);

console.log('\nAfter deep set:', 
  JSON.stringify(modifiedData.company.departments.engineering, null, 2));

// Merge objects
const update = {
  company: {
    departments: {
      engineering: {
        location: "Floor 5",
        employees: [
          { id: 4, name: "Eve", skills: ["TypeScript"] }
        ]
      }
    },
    settings: {
      theme: "light"
    }
  }
};

const merged = deepMerge({}, deepData, update);
console.log('\nAfter deep merge - New employee:', 
  merged.company.departments.engineering.employees[3]);
console.log('Theme changed to:', merged.company.settings.theme);

// JSON Diff utility (simplified)
function jsonDiff(obj1, obj2, path = '') {
  const diffs = [];
  
  if (obj1 === obj2) return diffs;
  
  if (typeof obj1 !== typeof obj2) {
    diffs.push({
      path: path || 'root',
      type: 'TYPE_CHANGE',
      old: typeof obj1,
      new: typeof obj2
    });
    return diffs;
  }
  
  if (typeof obj1 === 'object' && obj1 !== null && obj2 !== null) {
    const keys = new Set([...Object.keys(obj1), ...Object.keys(obj2)]);
    
    for (const key of keys) {
      const newPath = path ? `${path}.${key}` : key;
      
      if (!(key in obj1)) {
        diffs.push({ path: newPath, type: 'ADDED', new: obj2[key] });
      } else if (!(key in obj2)) {
        diffs.push({ path: newPath, type: 'REMOVED', old: obj1[key] });
      } else {
        diffs.push(...jsonDiff(obj1[key], obj2[key], newPath));
      }
    }
  } else if (obj1 !== obj2) {
    diffs.push({ path: path || 'root', type: 'VALUE_CHANGE', old: obj1, new: obj2 });
  }
  
  return diffs;
}

console.log('\n=== JSON Diff ===');
const diff = jsonDiff(deepData, merged);
console.log('Differences found:', diff.length);
diff.forEach(d => console.log(`${d.type} at ${d.path}`));

Deep Operation Utilities:

deepGet - Safely access nested properties
deepSet - Set values in nested paths
deepMerge - Merge nested objects
jsonDiff - Find differences between objects

Next Steps

Now that you understand JSON, learn how to use LocalStorage and SessionStorage for client-side data persistence.

← Fetch API LocalStorage & SessionStorage →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

JSON in JavaScript

🤔 What is JSON?

💡 JSON Syntax Rules

What JSON Doesn't Support

📝 JSON Basics: Parse & Stringify

Key Methods:

🔧 Advanced Parse & Stringify

Replacer Function:

Reviver Function:

✅ JSON Validation

Common JSON Errors:

💾 Practical Example: Storage Manager

💡 Real-world Uses:

🔍 Deep JSON Operations

Deep Operation Utilities:

Next Steps

Follow Us

Our Tools

Our Company

Special Tools