DEV Community

Tamilselvan K
Tamilselvan K

Posted on

Day-39 Today I Learned About JSON – A Beginner’s Guide

#webdev #programming #javascript #beginners

What is JSON?

JSON stands for JavaScript Object Notation. It's a lightweight data-interchange format that's easy for humans to read and write and easy for machines to parse and generate.

It’s widely used in web development, especially when exchanging data between a client and a server.

Why is JSON So Popular?

  • Human-readable
  • Language-independent
  • Works well with APIs
  • Simple structure

JSON Basics

A JSON file is basically made up of two structures:

1. Objects – key-value pairs enclosed in { } 

{
  "name": "Tamilselvan",
  "age": 25,
  "isStudent": false
}
Enter fullscreen mode Exit fullscreen mode

2. Arrays – an ordered list of values enclosed in [ ] 

[
  "HTML",
  "CSS",
  "JavaScript"
]
Enter fullscreen mode Exit fullscreen mode

JSON can nest objects and arrays inside each other:

{
  "name": "Tamilselvan",
  "skills": ["Python", "Node.js", "SQL"],
  "address": {
    "city": "Chennai",
    "country": "India"
  }
}
Enter fullscreen mode Exit fullscreen mode

JSON Rules

  1. Data is in name/value pairs
  2. Names (keys) must be in double quotes
  3. Strings are in double quotes
  4. Values can be:
  • Strings
  • Numbers
  • Objects
  • Arrays
  • Booleans (true/false)
  • null

Where Is JSON Used?

  • APIs (like RESTful APIs)
  • Configuration files (package.json in Node.js)
  • Cloud platforms (like Firebase or AWS)
  • Frontend/backend communication in web apps

How to Use JSON in JavaScript

Parse JSON string to JavaScript object: 

const jsonData = '{"name":"Tamilselvan"}';
const obj = JSON.parse(jsonData);
console.log(obj.name); // Tamilselvan
Enter fullscreen mode Exit fullscreen mode

Convert JavaScript object to JSON string: 

const data = { language: "JavaScript", level: "Beginner" };
const jsonString = JSON.stringify(data);
console.log(jsonString);
Enter fullscreen mode Exit fullscreen mode

Final Thoughts

Learning JSON is like unlocking a universal language for web development. Whether you're dealing with APIs, databases, or configs, JSON will be your constant companion.

Top comments (0)