JSON

You might say

AI keeps returning data with curly braces inside curly braces. How do I read and write it?

Represent structured data as text that programs can exchangeJSON stores objects, arrays, strings, numbers, booleans, and null in a widely supported text format. APIs often use it for request and response bodies. The text must follow strict syntax, and the receiving side still needs to validate the expected fields and types.

Know first

HTTP

JavaScript Object Notation

{
  "name": "Button",
  "price": 0,
  "free": true,
  "tags": ["General", "Form"]
}

When to use it

API request and response
Configuration file
Store structured data temporarily
Exchange nested values between systems

When NOT to use it

Add comments or trailing commas where strict JSON is required
Assume parsed JSON has the correct fields
Use JSON for a large binary file
Expose secret data just because the format is readable

Anatomy

{
  "tags": ["Universal", "form"]
}

A pair of curly brackets enclosing the whole, describing "a thing"

The name to the left of the colon must be in double quotes

An ordered list enclosed in square brackets, which is used to render List

The content on the right side of the colon: string, number, Boolean, object, array

Variants

Object

{ "name": "button", "price": 0 }

Curly braces enclose key-value pairs to describe something

Array

[ "General", "Form", "Feedback" ]

Square brackets enclose the list, the order is meaningful

Nested

{ "user": { "roles": […] } }

Objects are arrays, and real data is like this

Typical use cases

API response

HeadersPreviewResponse

        ▾ data: {…}

        ▾ list: [3]

        ▾ 0: {name: "Button", price: 0}

        ▾ 1: {name: "Text input", price: 0}

        ▸ 2: {…}

        total: 42

Preview helps you arrange JSON into a collapsible tree

Configuration

data.json
{
 "site": "Vibe Picture Book",
 "stats": {
 "components": 48,
 "online": true
 },
 "tags": ["General", "Form"]
}

Webhook payload

{
"name": "Button",
"tags": ["Universal",],
}

✕ Line 3: There is an extra comma after the last item in the array

Exported data

$ curl -s https://api.vibeui.dev/user/1 | jq
{
 "id": 1,
 "name": "Alex Chen",
 "roles": [
 "admin",
 "editor"
 ]
}
# jq Format compressed JSON into an indented structure