JSON for Non-Developers: Everything You Need to Know to Work with Webhooks

Verification note: This post was re-reviewed in May 2026. Public tool pricing, compliance rules, and platform capabilities should be checked against the source list at the end before making budget, legal, or deployment decisions. Private client metrics are not published unless they are safe, public, and verifiable.

Why non-developers need to understand JSON

If you use Make.com, n8n, Zapier, or any automation tool, you encounter JSON constantly:

• Webhook payloads from Typeform, GHL, Stripe, etc.
• API request/response bodies
• Data passed between automation steps
• Configuration files for some tools

You don't need to code to work with JSON. But understanding its structure makes automation 10x easier.

---

What JSON looks like

JSON (JavaScript Object Notation) is a text format for storing structured data. Here's an example:

{
  "name": "Jane Doe",
  "email": "[email protected]",
  "age": 32,
  "is_active": true,
  "phone": null,
  "tags": ["hot-lead", "solar"],
  "address": {
    "street": "123 Main St",
    "city": "Denver",
    "state": "CO"
  }
}

This describes one person. Let's break down what each piece means.

---

The 6 data types in JSON

1. String (text)

Wrapped in double quotes: "hello", "[email protected]", "+15551234567".

Can contain letters, numbers, spaces, punctuation. Special characters inside need escaping (\" for a quote inside a string).

2. Number

Not in quotes: 32, 99.95, -5, 1000000.

Integers and decimals are the same type in JSON.

3. Boolean

True or false, no quotes: true or false.

4. Null

Represents "nothing" or "missing value": null (no quotes).

Not the same as "null" (which is a string containing the word "null").

5. Array

A list of items in square brackets, separated by commas:

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

Arrays can contain any types, and mix types:

[1, 2, "three", true, null]

6. Object

A collection of key-value pairs in curly braces:

{
  "key1": "value1",
  "key2": 42,
  "key3": true
}

Keys are strings. Values can be any type, including nested objects and arrays.

---

Reading a webhook payload

Here's a typical form submission webhook payload:

{
  "event": "form.submitted",
  "timestamp": "2026-04-24T15:30:45Z",
  "form_id": "contact_us",
  "submission": {
    "name": "Jane Doe",
    "email": "[email protected]",
    "phone": "+15551234567",
    "message": "Interested in solar panels.",
    "business_type": "residential"
  },
  "metadata": {
    "ip_address": "73.45.89.12",
    "user_agent": "Mozilla/5.0...",
    "source_page": "/solar-quote"
  },
  "tags": ["new-lead", "solar"]
}

How to read it:

• Top level: one object with 5 keys: event, timestamp, form_id, submission, metadata, tags
• event -> string "form.submitted"
• timestamp -> string "2026-04-24T15:30:45Z" (ISO 8601 date format)
• form_id -> string "contact_us"
• submission -> object with 5 sub-keys (name, email, phone, message, business_type)
• metadata -> object with 3 sub-keys
• tags -> array of 2 strings

---

Dot notation and bracket notation

To reference a specific field, you use dot notation (or bracket notation in code).

For the webhook above:

• event -> "form.submitted"
• submission.email -> "[email protected]"
• submission.business_type -> "residential"
• metadata.ip_address -> "73.45.89.12"
• tags -> the whole array
• tags[0] -> "new-lead" (first item, zero-indexed)
• tags[1] -> "solar"

---

How Make.com references JSON

In Make's webhook module, incoming JSON becomes available as mappable fields. To use the email:

• You click on the email input of the next module
• Make shows a list of available fields: event, timestamp, submission.email, etc.
• Click submission.email -> it inserts {{1.submission.email}} (1 = the module number)

Arrays in Make:

• If the webhook has tags: ["new-lead", "solar"], Make gives you the whole array
• To use one item, you'd typically iterate over the array or use {{1.tags[1]}} for "new-lead"

---

How n8n references JSON

n8n uses similar dot notation but slightly different syntax in expressions:

{{ $json.submission.email }}
{{ $json.tags[0] }}

Or in the UI, you click the field picker and select submission.email from a list.

---

Nested objects - understanding depth

Some webhooks have deeply nested structures:

{
  "data": {
    "customer": {
      "profile": {
        "contact_info": {
          "primary_email": "[email protected]"
        }
      }
    }
  }
}

To access the email: data.customer.profile.contact_info.primary_email

This is annoying but not complicated. Just trace the path from outside in.

---

Arrays - the iteration challenge

When a webhook has an array of items, you often need to process each one:

{
  "event": "order.created",
  "order_id": "ord_12345",
  "line_items": [
    {"product": "Solar Panel", "quantity": 2, "price": 500},
    {"product": "Inverter", "quantity": 1, "price": 1200},
    {"product": "Mounting Kit", "quantity": 1, "price": 300}
  ]
}

To process each line item:

Make.com: Use "Iterator" module. It takes the array and outputs one bundle per item. Downstream modules run for each item.

n8n: "Split Out" node or loop. Processes each item individually.

Zapier: Line Item support varies by integration.

---

Common JSON patterns you'll encounter

Pattern 1: Success/error envelope

Many APIs return:

{
  "success": true,
  "data": { ... },
  "error": null
}

Or on failure:

{
  "success": false,
  "data": null,
  "error": {
    "code": "VALIDATION_ERROR",
    "message": "Email is required"
  }
}

Always check success before using data.

Pattern 2: Pagination

APIs that return lists often include pagination:

{
  "total": 150,
  "page": 1,
  "per_page": 25,
  "items": [ ... ],
  "next_page_url": "https://api.example.com/contacts?page=2"
}

To get all 150, call repeatedly with different page values until you've seen all.

Pattern 3: Metadata + data

Separation of actual data from metadata:

{
  "meta": {
    "request_id": "req_abc123",
    "timestamp": 1714061445
  },
  "data": { ... }
}

Useful for debugging (log the request_id if something goes wrong).

---

Writing JSON yourself (for API requests)

When you POST to an API from Make/n8n/Zapier, you write JSON in the body:

{
  "email": "[email protected]",
  "first_name": "John",
  "last_name": "Smith",
  "tags": ["imported", "webinar-attendee"]
}

Rules:

• Keys in double quotes
• Strings in double quotes
• Numbers and booleans NOT in quotes
• Commas between fields (but NOT after the last field)
• Curly braces around the whole thing

Common JSON errors

Trailing comma:

{
  "email": "[email protected]",
  "name": "John",   <-- this trailing comma is invalid JSON
}

Single quotes:

{'email': '[email protected]'}   <-- invalid, must be double quotes

Unquoted keys:

{email: "[email protected]"}   <-- invalid, keys must be in quotes

Unescaped special chars:

{"message": "She said "hi""}   <-- invalid, inner quotes need \"

Correct: {"message": "She said \"hi\""}

---

Tools for working with JSON

JSON validators

If you're pasting JSON into a tool and getting errors, validate the syntax:

• jsonlint.com
• jsonformatter.org

They'll tell you exactly which line has the problem.

JSON formatters

Raw JSON is ugly. Formatted JSON is readable:

{"name":"Jane","age":32,"tags":["a","b"]}

becomes

{
  "name": "Jane",
  "age": 32,
  "tags": ["a", "b"]
}

Same tools above will format for you. Or Ctrl+Shift+P -> "Format Document" in VS Code.

Make.com's text parser

If you have a JSON string in a field and need to extract a value, use Make's "Parse JSON" module. Gives you access to fields via dot notation.

n8n's JSON node

Similar - parse JSON string into object, then reference fields.

---

Reading JSON without going crazy

Indent consistently. Copy the JSON into a formatter if it's on one line.

Trace paths from outside in. Start at the top, drill down.

Use a viewer. VS Code has built-in JSON syntax highlighting + collapsing. Makes navigation easier.

When stuck, log it. In Make/n8n, dump the full payload to a Google Sheet or email. See the full structure. Reference fields from there.

---

Sources

JSON is defined by RFC 8259 (2017), which supersedes RFC 4627 and ECMA-404. All syntax and type descriptions align with the current specification. Usage patterns documented here are standard across all major automation platforms (Make.com, n8n, Zapier), verified against their official documentation.

Need help parsing a specific webhook payload or writing an API request body? Let's talk - this is often a 30-minute fix if you know what to look for.

Sources and verification

This article was reviewed in May 2026. Vendor pricing, platform features, ad policies, and telemarketing rules change often, so operational or budget decisions should be checked against the current source pages below before implementation.

• Supabase securing your API
• Supabase Row Level Security
• Supabase Data API hardening
• Vercel pricing and usage

Private client metrics, lead counts, appointment counts, cost reductions, and revenue examples are intentionally removed, softened, or framed as modeled examples unless they can be verified publicly without exposing client data.