Backend

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.

Also calledJavaScript Object Notation

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

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