# JSON Editor — Examples

> Hands-on workflows with the JSON Editor: format nested JSON, repair broken JSON, scan data in the table, minify, and transform.

Source: https://www.jpkc.com/db/en/tools/json/examples/

Back to the overview: [JSON Editor](https://www.jpkc.com/db/en/tools/json/) · Open the tool live: [www.jpkc.com/tools/json/](https://www.jpkc.com/tools/json/)

The [manual](https://www.jpkc.com/db/en/tools/json/manual/) explains every feature and view in detail. This page adds **concrete workflows**: typical tasks, walked through step by step. The tool's interface is in English, so button and view names appear as they do in the actual UI.

## Example 1: Make nested JSON readable

The classic — you have an API response on a single endless line and want to see what's in it.

1. Open the [JSON Editor](https://www.jpkc.com/tools/json/) and switch to the **Text** view.
2. Paste the compact JSON — something like:

```json
{"user":{"id":42,"name":"Ada","roles":["admin","editor"]},"active":true}
```

3. Click **Format**. The editor indents everything cleanly with two spaces:

```json
{
  "user": {
    "id": 42,
    "name": "Ada",
    "roles": [
      "admin",
      "editor"
    ]
  },
  "active": true
}
```

4. To get an overview of deep structures, switch to the **Tree** view and collapse and expand the nodes. That way you stay oriented even in large responses.

## Example 2: Validate and repair broken JSON

You copied JSON from a log or a config, and something's off.

1. Paste the snippet into the **Text** view — for example, with several typical mistakes at once:

```json
{
  name: 'Ada',
  roles: ['admin', 'editor',],
}
```

Here the keys aren't quoted, there are single instead of double quotes, and there's a trailing comma. The editor flags the error spot immediately — the **real-time validation** tells you *where* it breaks.

2. The editor flags the JSON as invalid and offers an **auto-repair** inline in the **Text** view. Accept it — the three problems are fixed automatically:

```json
{
  "name": "Ada",
  "roles": [
    "admin",
    "editor"
  ]
}
```

3. If an error remains after repair (with fundamentally ambiguous input), the message shows the cause. Fix the spot by hand in the **Text** view and check again — validation turns green once the JSON is well-formed.

Important: this is a **syntax** repair. Whether your fields are correct in substance (right types, required keys) is not something the editor checks — for that you'd need a JSON schema.

## Example 3: Scan an array of objects in the table

API responses are often arrays of uniform objects. Those are best read as a table.

1. Load or paste an array of objects:

```json
[
  { "id": 1, "name": "Ada", "active": true },
  { "id": 2, "name": "Linus", "active": false },
  { "id": 3, "name": "Grace", "active": true }
]
```

2. Switch to the **Table** view. The fields `id`, `name`, and `active` become columns, each entry becomes a row — just like a spreadsheet.
3. **Sort by clicking** a column header (e.g. by `name`), edit values directly in the cells, and add or remove rows as needed.
4. Need the result as a file again? Click **Download** for a formatted `data.json`.

Tip: if the structure is deeply nested or irregular, the table is less helpful. Then stay in the **Tree** view.

## Example 4: Minify JSON for shipping

For a config, a data attribute, or compact transmission you want the opposite of "readable": as small as possible.

1. Paste your formatted JSON (or format it first with **Format**).
2. Click **Compact**. The editor removes all extra whitespace and line breaks and squeezes everything onto a single line:

```json
{"user":{"id":42,"name":"Ada","roles":["admin","editor"]},"active":true}
```

3. With **Copy**, the result goes straight to the clipboard — ready to embed.

If you also want a **stable, reproducible** order (e.g. to compare two files), click **Sort** first: that sorts all keys recursively and alphabetically, so the same object always looks the same.

## Example 5: Filter, sort, and pick fields with Transform

You want just a slice of a large list — without deleting by hand.

1. Load your array of objects (see Example 3) and stay in the **Tree** view.
2. Open the **Transform** tool from the **context menu** (right-click) or the menu.
3. In the wizard you can combine three things:
   - **filter** — e.g. only entries with `active = true`,
   - **sort** — e.g. by `name`, ascending,
   - **pick fields** (projection) — keep only `id` and `name`.
4. The **live preview** shows the result immediately. When it's right, apply the transformation.

For recurring, more complex reshaping you can write a **query** directly in the JavaScript query language instead of using the wizard. To quickly find a spot, the **search** in tree or text view is often enough.

## Example 6: Load a file, sort keys, keep working — and save your state

A continuous mini-workflow from open to save.

1. Click **Open** and pick a `.json` file from your disk. Valid JSON lands as a structure right away; if the file is broken, it loads as raw text — then the **Text** view's auto-repair helps (see Example 2).
2. Click **Sort** to order all keys alphabetically — good for overview and for comparisons.
3. Keep working in the right view (edit values in the tree, table for lists, text for the raw view). **Your work is saved automatically in the browser** — an accidental reload costs you nothing.
4. When you're done, click **Download** for a formatted `data.json`. Working on a **shared machine** with sensitive data? Hit **Clear** afterwards — that also deletes the state saved in the browser.

---

There's more on the subpages: the [overview](https://www.jpkc.com/db/en/tools/json/) for the big picture, the [manual](https://www.jpkc.com/db/en/tools/json/manual/) for every feature in detail, and the [tips & tricks](https://www.jpkc.com/db/en/tools/json/tips/) for the finer points. You can try it all directly in the [tool](https://www.jpkc.com/tools/json/).