Skip to content
FrostyBee Docs LogoFrostyBee Docs

Explore your first file

In this tutorial you open a small JSON file, find the order that is still pending, look at its details, and copy the path to its status, ready to paste into a query or a script. It takes about five minutes.

Before you start

Section titled “Before you start”

Install JSON Digger. Then save the following text as orders.json in a folder you can find, for example your Documents folder:

orders.json
{
  "store": "Northwind",
  "orders": [
    {
      "id": 1001,
      "status": "shipped",
      "customer": { "name": "Ana Lima", "email": "ana@example.com" },
      "items": [{ "sku": "A-100", "qty": 2 }]
    },
    {
      "id": 1002,
      "status": "pending",
      "customer": { "name": "Ben Ortiz", "email": "ben@example.com" },
      "items": [
        { "sku": "B-200", "qty": 1 },
        { "sku": "A-100", "qty": 5 }
      ]
    }
  ]
}

Open the file

Section titled “Open the file”

  1. Start JSON Digger. On the first start, a welcome dialog points out the command palette and Preferences. Select Get started to close it.

  2. Press Ctrl+O, or select Open File on the welcome screen.

  3. Choose orders.json and select Open.

The file opens in a tab named orders.json, in the Tree view. The root object is already expanded, so you see its two members: "store": "Northwind" and "orders": [2]. The [2] means orders is an array with two elements; an object shows its member count in braces, for example {4}.

Expand the tree

Section titled “Expand the tree”

  1. Click the orders row. It expands and shows two rows, [0] and [1], each {4}.

  2. Click the [0] row to expand it. You see id, status, customer, and items.

  3. Click the [0] row again to collapse it.

Clicking an object or array row selects it and expands or collapses it. To expand a node and everything inside it at once, double-click it. You can also use the arrow keys: Right expands the selected row and Left collapses it.

Search for a value

Section titled “Search for a value”

  1. Press Ctrl+F. The search bar opens above the tree with the cursor in the search box.

  2. Type pending and press Enter.

The search bar shows 1 of 1, and the tree expands [1] and selects its "status": "pending" row, outlined as the current match.

Press Esc to close the search bar. The status row stays selected. For the search options and the list of results, see Search a document.

Inspect the node

Section titled “Inspect the node”

Select the Properties button at the top of the activity rail, the column of buttons on the right edge of the window. The Properties panel opens and describes the selected node:

  • Type: string
  • Key: "status"
  • Path: $.orders[1].status
  • Value Preview: "pending"

The panel also shows the node’s depth and size in bytes. Select another row, for example customer under [1], and the panel follows the selection. For the other fields, see Properties panel.

Copy its path

Section titled “Copy its path”

  1. Select the "status": "pending" row again.

  2. Press Ctrl+Shift+P, or right-click the row and choose Copy Path.

  3. Paste into any text editor.

The clipboard holds $.orders[1].status. A path starts with $ for the root, adds .key for an object member and [n] for an array element, counting from 0. Copy values and paths explains the format, including keys that need quotes, and the other things you can copy.

Next steps

Section titled “Next steps”