Free JSON Formatter online

What is JSON? A Beginner-Friendly Guide

JSON stands for JavaScript Object Notation and is commonly pronounced as "Jason." It's a lightweight, human-readable data-interchange format used to store and exchange data between systems.

JSON is widely used in web development due to its simplicity and universal support across all major programming languages. Whether you're dealing with APIs, server responses, or configuration files, JSON is the go-to format.

Why Use JSON?

• Human-readable when properly formatted
• Lightweight — no closing tags like XML
• Easy to parse in all modern languages
• Widespread support with countless libraries
• Clear structure that’s intuitive for developers

JSON Syntax and Format Rules

• Objects

  • Defined using curly braces { }
  • Consist of key-value pairs
  • Keys must be in double quotes

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

• Arrays

  • Defined using square brackets [ ]
  • Contain values or objects, separated by commas

  ["apple", "banana", "cherry"]

• Key-Value Pair Rules

  • Keys must be strings in double quotes
  • Values can be:
    • Strings: "text"
    • Numbers: 42
    • Booleans: true, false
    • Null: null
    • Arrays: [1, 2, 3]
    • Objects: { "key": "value" }
  • Trailing commas are not allowed

JSON Data Types Supported

• String: "Hello World"
• Number: 123, -45.67, 3.14e5
• Boolean: true, false
• Null: null
• Array: ["A", "B", "C"]
• Object: { "id": 1, "value": "A" }

Example of a JSON Object

{
"anObject": {
    "numericProperty": -122,
    "stringProperty": "An offensive \" is problematic",
    "nullProperty": null,
    "booleanProperty": true,
    "dateProperty": "2011-09-23"
},
"arrayOfObjects": [
    { "item": 1 },
    { "item": 2 },
    { "item": 3 }
],
"arrayOfIntegers": [1, 2, 3, 4, 5]
}

Working with JSON in JavaScript

• Using eval() (Not Recommended)

  <script>
  var someJsonString = '{"someProperty":"someValue"}';
  var jsonObject = eval('(' + someJsonString + ')');
  alert(jsonObject.someProperty);
  </script>

  Warning: Using eval() is dangerous. It can execute arbitrary code and introduce security vulnerabilities.

• Use JSON.parse() Instead

  <script>
  var someJsonString = '{"someProperty":"someValue"}';
  var jsonObject = JSON.parse(someJsonString);
  alert(jsonObject.someProperty);
  </script>

  • Safe and secure alternative to eval()
  • Parses a JSON string into a JavaScript object

• Convert JS Object to JSON with JSON.stringify()

  <script>
  var someObject = { someProperty: "someValue" };
  var jsonString = JSON.stringify(someObject);
  alert(jsonString);  // Output: {"someProperty":"someValue"}
  </script>

• Create JavaScript Object Using JSON Syntax

  <script>
  var jsonObject = { someProperty: "someValue" };
  alert(jsonObject.someProperty);
  </script>

  This is how you manually create an object in JavaScript using JSON-style syntax.

File and MIME Type Info

• File extension: .json
• MIME type: application/json