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"]
}

You can say this to an AI Agent

The API returns an items array while the page reads data.list. Align the code with the actual JSON shape and validate required item fields. Show a clear failure for missing or invalid data instead of silently returning an empty list. Test valid, missing-field, and invalid JSON inputs.

When to use it

API request and response
{ "data": { "list": [ … ] } }Confirm the overall structure first, then read fields by level.
Configuration file
[{…}"text"42]
An ordered list of JSON values; whether they share a shape depends on the API contract.
Store structured data temporarily
data→user→name
Nested fields must be read by level.
Exchange nested values between systems
{"a":1,"b":[2,3]}→Format

When NOT to use it

Add comments or trailing commas where strict JSON is required
{ name: "Xiaolin" }The key lacks double quotes, so it cannot be parsed as JSON.
Assume parsed JSON has the correct fields
[ "a", "b", ]JSON does not allow a trailing comma after the last item.
Use JSON for a large binary file
{ 'name': 'Xiaolin' }JSON keys and strings must use double quotes.
Expose secret data just because the format is readable
{ // comment "a": 1 }JSON does not support comments.

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

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website

An API returns {"items":[{"name":"A"}]}, but the page reads data.list and fails. What should be fixed first?

A. Read items from the actual JSON shape and verify each required fieldB. Replace double quotes with single quotes and keep reading data.listC. Catch the error, return an empty list, and stop inspecting the response