https://github.com/ayecue/transform-json-to-html

Transform JSON to html preview
https://github.com/ayecue/transform-json-to-html

Last synced: 15 days ago
JSON representation

Transform JSON to html preview

• Host: GitHub
• URL: https://github.com/ayecue/transform-json-to-html
• Owner: ayecue
• License: mit
• Created: 2022-09-29T15:17:31.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-09-29T21:43:27.000Z (over 2 years ago)
• Last Synced: 2024-12-01T19:06:13.601Z (about 1 month ago)
• Language: TypeScript
• Size: 1.38 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# transform-json-to-html

[![transform-json-to-html](https://circleci.com/gh/ayecue/transform-json-to-html.svg?style=svg)](https://circleci.com/gh/ayecue/transform-json-to-html)

# Install

```

npm i transform-json-to-html

```

# Description

Transform JSON into a HTML tree. Inspired by [json-formatter-js](https://github.com/mohsen1/json-formatter-js).

# Usage

```js

const { transform } = require('transform-json-to-html')

const obj = {

  test: 'was',

  moo: [

    'foo',

    'bar'

  ],

  inner: {

    'bar': 1,

    inner: {

      'foo': 2

    },

    inner2: new Map([['test', 'x']]),

    inner3: new Set(['was', 'wo'])

  },

  map: new Map([['test', 'x']]),

  set: new Set(['was', 'wo'])

};

obj.cyclic = obj;

const item = transform(obj, {

  depth: 4

});

document.getElementById('root').appendChild(item);

```

# API

`transform(object [, options])`

* `object` - Any object you want to transform into HTML.

* `options` - Optional argument to define options.

  * `depth` - Max depth for traversal.

  * `itemLimit` - Limit of items to display of value.

  * `collapseDepth` - Depth from where items should be collapsed by default.

  * `theme` - CSS theme to use.

  * `parseItem` - Parse item.

  * `onCollapse` - Callback for collapse event.

Returns HTMLElement.

## Default options:

```js

{

  "depth": 2,

  "itemLimit": 100,

  "collapseDepth": 2,

  "theme": "default",

  "parseItem": (v) => v;

  "onCollapse": (ev) => {};

}

```