iendeavor / Object Visualizer
Licence: mit
Vue JSON inspector with Chrome-like theme.
Stars: ✭ 159
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Object Visualizer
Nanomorph
🚅 - Hyper fast diffing algorithm for real DOM nodes
Stars: ✭ 621 (+290.57%)
Mutual labels: tree, dom
js-symbol-tree
Turn any collection of objects into its own efficient tree or linked list using Symbol
Stars: ✭ 86 (-45.91%)
Mutual labels: tree, dom
theroomjs
A vanilla javascript plugin that allows you to outline dom elements like web inspectors
Stars: ✭ 53 (-66.67%)
Mutual labels: dom, inspector
EurekaTrees
Visualizes the Random Forest debug string from the MLLib in Spark using D3.js
Stars: ✭ 37 (-76.73%)
Mutual labels: tree, visualizer
Vue Json Pretty
A JSON tree view component that is easy to use and also supports data selection.
Stars: ✭ 477 (+200%)
Mutual labels: tree, json
Ply
CSS inspection aided by visual regression pruning
Stars: ✭ 370 (+132.7%)
Mutual labels: inspector, dom
Deepdash
eachDeep, filterDeep, findDeep, someDeep, omitDeep, pickDeep, keysDeep etc.. Tree traversal library written in Underscore/Lodash fashion
Stars: ✭ 175 (+10.06%)
Mutual labels: tree, object
Django Jsoneditor
Django JSONEditor input widget to provide javascript online JSON Editor
Stars: ✭ 124 (-22.01%)
Mutual labels: tree, json
AdvancedHTMLParser
Fast Indexed python HTML parser which builds a DOM node tree, providing common getElementsBy* functions for scraping, testing, modification, and formatting. Also XPath.
Stars: ✭ 90 (-43.4%)
Mutual labels: tree, dom
X2struct
Convert between json string and c++ object. json字符串和c++结构体之间互相转换
Stars: ✭ 251 (+57.86%)
Mutual labels: object, json
Mlib
Library of generic and type safe containers in pure C language (C99 or C11) for a wide collection of container (comparable to the C++ STL).
Stars: ✭ 321 (+101.89%)
Mutual labels: tree, json
Framework
Strongly-typed JavaScript object with support for validation and error handling.
Stars: ✭ 136 (-14.47%)
Mutual labels: object, json
Vue Ui For Pc
基于Vue2.x的一套PC端UI组件,包括了Carousel 跑马灯、Cascader 级联、Checkbox 多选框、Collapse 折叠面板、DatePicker 日期选择、Dialog 对话框、Form 表单、Input 输入框、InputNumber 数字输入框、Layer 弹窗层、Loading 加载、Menu 菜单、Page 分页、Progress 进度条、Radio 单选框、SelectDropDown 仿select、Switch 开关、Table 表格、Tabs 标签页、Textarea 文本框、Tooltip 文字提示、BackTop 返回顶部、steps 步骤条、Transfer 穿梭框、Tree 树形、Upload 文件上传、Lazy 图片懒加载、Loading 加载、Pagination 分页等等
Stars: ✭ 156 (-1.89%)
Mutual labels: tree
Object Visualizer
Visualize the JSON object to the DOM.
Live Demo
Feature
Reactivity
Fully Configurable
- option.getKeys: customize visible keys in any nested data
- option.expandOnCreatedAndUpdated: expand or collapse after created or updated
Expand/Collapse Hot Keys
Starting from v4.0.0, this feature is only available for objects due to performance issues.
- Recursive expand
Meta+Click
- Recursive collapse
Meta+Shift+Click
Installation
$ npm install object-visualizer
<script src="https://unpkg.com/object-visualizer"></script>
<link
type="text/css"
rel="stylesheet"
href="https://unpkg.com/object-visualizer/dist/index.css"
/>
How to use
- Import the mount function from the module
import { mount } from "object-visualizer";
- Query the HTML element to inject the JSON, e.g.
<pre id="app"></pre>
//Vanilla JS
const preEl = document.getElementById("app");
//Vanilla JS new dom api
const preEl = document.querySelector("#app");
//jQuery
const preEl = $("#app");
- Have your data on a variable
const data = {};
Optional: To make DOM reactivity, just wrap your data via reactive function before mount it.
import { reactive } from "object-visualizer";
const data = reactive({});
- Use mount function
mount(data, preEl);
- Thats it!!
Options
// path will be string[]
const options = {
getKeys: (object, path) => {
return Object.keys(object).sort();
},
expandOnCreatedAndUpdated: (path) => {
return true;
},
};
mount(data, preEl, options);
License
Donate
If this library helped you out feel free to donate.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].