{jsonview}

A JSON value or a PHP array as a tree that folds open and shut, coloured by type.

Widgets Either form

Syntax 

{jsonview $value}
{jsonview $value, open=1, title='Label'}
{jsonview data='name'}
{jsonview} {"id": 42, "paid": true} {/jsonview}

Parameters

value
The value to show: a field holding an array, or a text - a text that is a JSON object or list is decoded.

Options

data
Names the value instead: a {data} store, a page array or a _data file.
open
The number of levels shown unfolded, 2 when not given; 0 folds everything.
title
A label for the outermost level.

Description

{jsonview} shows a value as a JSON tree: every object and list is a <details> element that opens and closes on a click, with no script. Keys, strings, numbers, booleans and null each have their own colour, and a folded node says how many keys or items it holds.

The value comes from one of three places:

  • the first parameter - a field holding an array (a page array, a row) or a text; the tag reads its items raw, as {debug} does, so a field that holds an array is that array. A text that reads as a JSON object or list is decoded.
  • data= - a {data} store, a page array or a _data file by name.
  • as a pair, the content - JSON taken as it stands, before the level walks it, so its braces need no {ignore}.

open= is the number of levels shown unfolded, 2 by default, and 0 folds everything. title= labels the outermost level.

Under the strict check these are errors: content that is no JSON, a second value, an unknown option (only open, title and data are read), a data= name that names nothing, an open= that is no number, and no value at all. The colours are --pad-jsonview-* custom properties.

Examples

A PHP array

A page array shown as the JSON it would be - one level open, the sections folded with their sizes.

Templateexamples/jsonview/1-array.pad 
{jsonview $settings, open=1, title='settings'}
PHPexamples/jsonview/1-array.php 
<?php

  $settings = [
    'shop'     => [ 'name' => 'Mini Wheels Co.', 'currency' => 'EUR', 'locales' => [ 'en', 'nl', 'de' ] ],
    'cache'    => [ 'pages' => TRUE, 'ttl' => 600 ],
    'features' => [ 'reviews' => TRUE, 'wishlist' => FALSE, 'giftcards' => NULL ],
    'version'  => '3.0.2' ];

?>
Resultopen alone
settings {…} 4 keys
  • "shop": {…} 3 keys
    • "name": "Mini Wheels Co."
    • "currency": "EUR"
    • "locales": […] 3 items
      • 0: "en"
      • 1: "nl"
      • 2: "de"
      ]
    }
  • "cache": {…} 2 keys
    • "pages": true
    • "ttl": 600
    }
  • "features": {…} 3 keys
    • "reviews": true
    • "wishlist": false
    • "giftcards": null
    }
  • "version": "3.0.2"
}

JSON as content

The JSON between the tags, its braces needing no ignore - two levels open by default.

Templateexamples/jsonview/2-content.pad 
{jsonview title='GET /api/orders/10417'}
  {
    "id": 10417,
    "paid": false,
    "customer": { "name": "Euro+ Shopping", "country": "ES" },
    "lines": [
      { "sku": "S18_1749", "qty": 2, "price": 136.0 },
      { "sku": "S24_2840", "qty": 6, "price": 35.29 }
    ],
    "coupon": null
  }
{/jsonview}
Resultopen alone
GET /api/orders/10417 {…} 5 keys
  • "id": 10417
  • "paid": false
  • "customer": {…} 2 keys
    • "name": "Euro+ Shopping"
    • "country": "ES"
    }
  • "lines": […] 2 items
    • 0: {…} 3 keys
      • "sku": "S18_1749"
      • "qty": 2
      • "price": 136
      }
    • 1: {…} 3 keys
      • "sku": "S24_2840"
      • "qty": 6
      • "price": 35.29
      }
    ]
  • "coupon": null
}

A data store by name

data= names a store made by a data tag - its rows as a list; open=1 shows the rows folded.

Templateexamples/jsonview/3-data.pad 
{data 'team'}
  [ { "name": "Alice", "role": "admin", "teams": [ "web", "ops" ] },
    { "name": "Bob",   "role": "editor", "teams": [ "web" ] } ]
{/data}
{jsonview data='team', open=1, title='team'}
Resultopen alone
team […] 2 items
  • 0: {…} 3 keys
    • "name": "Alice"
    • "role": "admin"
    • "teams": […] 2 items
      • 0: "web"
      • 1: "ops"
      ]
    }
  • 1: {…} 3 keys
    • "name": "Bob"
    • "role": "editor"
    • "teams": […] 1 item
      • 0: "web"
      ]
    }
]

See also

  • {debug} Shows values as a collapsible tree in the page, for a local request only, while rendering goes on.
  • {dump} Stops the request and shows the debug dump of the engine's state at that point.
  • {data} Turns its content - JSON, XML, YAML, CSV, a list or a range - into a named data set for a later tag to iterate.
  • {datatable} Rows as a complete HTML table - formatted numbers, a totals row, sorting and paging on the server.