npm package: @satachito/jp-tree
Description: JSON based object browser / editor
Author: Satoru Ogura
Latest version: 1.0.2

# jp-tree

THIS PACKAGE IS NO LONGER MAINTAINED.
PLEASE CONSIDER USING @satachito/jp-tree-view

https://www.npmjs.com/package/@satachito/jp-tree-view


A JSON based object browser / editor Web Component.

* No external resources.
* Very fast. There is no data conversion inside.
* Ultra small. Easy to understand and modify.


## Install
```
npm install @satachito/jp-tree --save
```

## Running demo

In our demo, we are using Bare module specifiers, ( for example `@satachito/jp-tree` to `./node_modules/@satachito/jp-tree/jp-tree.js` ). So run this demo using `es-dev-server` with `--node-resolve` option.

### Serve
```
npm install -g es-dev-server
cd node_modules/@satachito/jp-tree/demo
npm i
es-dev-server --node-resolve
```

### Access to specified address using Chrome

We are testing on Chrome only.


## Write HTML and JavaScript

### index.html
```
<!doctype html>
<html lang=zxx>
	<title>jp-tree demo</title>

	<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' rel='stylesheet'>
	<link href='https://fonts.googleapis.com/css?family=Material+Icons&display=block' rel='stylesheet'>

<body>
	<script type=module>
		import '@satachito/jp-tree'
	</script>
	<jp-tree></jp-tree>
	<jp-tree json=null></jp-tree>
	<jp-tree json=true></jp-tree>
	<jp-tree json=false></jp-tree>
	<jp-tree json=123></jp-tree>
	<jp-tree json='"ABC"'></jp-tree>
	<jp-tree
		json='{
			"jockeys": {
				"05339": {
					"name": "Christophe Patrice Lemaire"
				,	"birthday": 19790520
				}
			,	"05212": {
					"name": "Mirco Demuro"
				,	"birthday": 19790111
				}
			}
		,	"races": [
				{	"date":	20181125
				,	"name": "Japan Cup"
				,	"grade": "G1"
				,	"horses": [ "Almond Eye" ]
				}
			,	{	"date":	20181125
				,	"name": "Keihan Hai"
				,	"grade": "G3"
				,	"horses": [ "Danon Smash" ]
				}
			,	{	"date":	20190120
				,	"name": "Tokai S."
				,	"grade": "G2"
				,	"horses": [ "Inti" ]
				}
			,	{	"date":	20190120
				,	"name": "American Jockey Club Cup"
				,	"grade": "G2"
				,	"horses": [ "Sciacchetra" ]
				}
			]
		}'
		isOpen=true
	></jp-tree>
	<script type=module>	
		class
		Undef extends HTMLElement {
			constructor() {
				super()
				const jv = document.createElement( 'jp-tree' )
				jv.props( {}, 'THE UNDEF KEY' )
				this.attachShadow( { mode: 'open' } ).appendChild( jv )
			}
		}
		customElements.define( 'jp-undef', Undef )
		const
		container = {
			"HorseRaces": {
				"jockeys": {
					"05339": {
						"name": "Christophe Patrice Lemaire"
					,	"birthday": 19790520
					}
				,	"05212": {
						"name": "Mirco Demuro"
					,	"birthday": 19790111
					}
				}
			,	"races": [
					{	"date":	20181125
					,	"name": "Japan Cup"
					,	"grade": "G1"
					,	"horses": [ "Almond Eye" ]
					}
				,	{	"date":	20181125
					,	"name": "Keihan Hai"
					,	"grade": "G3"
					,	"horses": [ "Danon Smash" ]
					}
				,	{	"date":	20190120
					,	"name": "Tokai S."
					,	"grade": "G2"
					,	"horses": [ "Inti" ]
					}
				,	{	"date":	20190120
					,	"name": "American Jockey Club Cup"
					,	"grade": "G2"
					,	"horses": [ "Sciacchetra" ]
					}
				]
			}
		}
		class
		App extends HTMLElement {
			constructor() {
				super()
				const jv = document.createElement( 'jp-tree' )
				jv.props( container, 'HorseRaces', true, true )
				this.attachShadow( { mode: 'open' } ).appendChild( jv )
			}
		}
		customElements.define( 'jp-app', App )
	</script>
	<jp-undef></jp-undef>
	<jp-app></jp-app>
```

## Props

* json - The JSON to be displayed. Expects a valid JSON object.
* key - The key of the root object.
* isOpen - Open child elements. Default: true.
* edit - Edit mode. Default: true.
* depth - The maximum level of the JSON Tree to be expanded. Specify 0 to Infinity.

## API

props( container, key, isOpen = false, edit = false, depth = 0 )

* container - Container object. container[ key ] is to be displayed. Expects a valid JSON object.
* key - The key of the root object.
* isOpen - Open child elements. Default: false.
* edit - Edit mode. Default: false.
* depth - The maximum level of the JSON Tree to be expanded. Specify 0 to Infinity.


## Changelog  

* 1.0.0 Initial Release
* 1.0.1 Update README.md