https://github.com/polina-prokofieva/viewjson
The class for convenient visualization of json with some settings.
https://github.com/polina-prokofieva/viewjson
data data-visualization es5 es6 javascript json
Last synced: 8 months ago
JSON representation
The class for convenient visualization of json with some settings.
- Host: GitHub
- URL: https://github.com/polina-prokofieva/viewjson
- Owner: polina-prokofieva
- Created: 2019-03-01T12:36:25.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T20:04:02.000Z (almost 3 years ago)
- Last Synced: 2023-03-10T16:41:25.691Z (over 2 years ago)
- Topics: data, data-visualization, es5, es6, javascript, json
- Language: JavaScript
- Homepage: https://polina-prokofieva.github.io/ViewJSON/
- Size: 385 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ViewJSON
## Descrption
**ViewJSON** is a class for convenient presentation of a json.
## Published
https://polina-prokofieva.github.io/ViewJSON/
## Setup
Get files from **dist** directory and add it to your project.
## Syntax
```
vJSON = new ViewJSON.default(element, json, settings);
vJSON.start();
```
Or if you'll use source JS code from lib.sourse/ViewJSON.js:
```
vJSON = new ViewJSON(element, json, settings);
vJSON.start();
```
### Parameters
**element** — _DOM-element_ in which your json will be rendered. For proper work it should be block-element.
**json** — _string_ which is your json.
**settings** — _string_ which is json with settings for presentation of your json.
## Methods
**.start()** — generate and render view of your json to **element**.
**.clear()** — clear **element**.
## Settings Syntax
**settings** shoud have next fromat:
```
{
"root": "",
"formatCamelCase": true,
"formatDate": false,
"nullAppearence": "-",
"boolAppearence": ["No", "Yes"],
"hidePropertiesByValue": [
null,
0,
""
],
"hidePropertiesByKey": [
"OverdraftLimit",
"Description",
"Id"
],
"dateAppearence": {
"keys": [
"Date"
]
},
"showSearchPanel" : true,
"arraysAsTable": [
"Transactions"
],
"keysForArrays": {
"Accounts": "Title"
}
}
```
**root** — root of json which should be presented. If it is "" the whole json will be presented.
**formatCamelCase** — if it is _true_ all parameters in CamesCase will be formatted to separate words.
**formatDate** — format of date values.
**nullAppearence** — string by which will be replaced **_null_** values.
**boolAppearence** — array of strings by which will be replased **_true_** and **_false_** values.
**hidePropertiesByValue** — array of values by which will be hided parameters of your json.
**hidePropertiesByKey** — array of keys by which will be hided parameters of your json.
**dateAppearence** — key which will be detected as date.
**showSearchPanel** — show or not search panel.
**arraysAsTable** — array of keys of parameters which contain an array and which will be presented as a table.
**keysForArrays** — an abject where keys are names of arrays and values are properties which will be shown as keys for corresponding arrays.