@acarapetis/json-viewer 中文文档教程

Question

用于在树视图中可视化 JSON 数据的 Web 组件

---

Installation

npm i @alenaksu/json-viewer

然后将包导入您的项目。

import '@alenaksu/json-viewer';

---

Usage

<json-viewer></json-viewer>

属性

• data - the string representation of JSON object to load

属性

• data - get/set the JSON object

方法

• filter (regexOrPath: RegExp|string) => 无效 | 只维护符合给定条件的节点

• resetFilter () => 无效 | 清除过滤器

• expand (regexOrPath: RegExp|string) => 无效 | 展开所有符合给定条件的节点

• expandAll () => 无效 | expand('**') 的别名

• collapse (regexOrPath: RegExp|string) => 无效 | 折叠所有符合给定条件的节点

• collapseAll () => 无效 | collapse('**') 的别名

• search (regexOrPath: RegExp|string) => 迭代器 | 返回和迭代器可以遍历所有匹配的节点。 它将页面滚动到节点并突出显示它。

Basic Usage

将 JSON 放入元素

<json-viewer>
    { "quiz": { "sport": { "q1": { "question": "Which one is correct team name in NBA?", "options": [ "New York Bulls",
    "Los Angeles Kings", "Golden State Warriros", "Huston Rocket" ], "answer": "Huston Rocket" } }, "maths": { "q1": {
    "question": "5 + 7 = ?", "options": [ "10", "11", "12", "13" ], "answer": "12" }, "q2": { "question": "12 - 8 = ?",
    "options": [ "1", "2", "3", "4" ], "answer": "4" } } } }
</json-viewer>

Load the JSON dinamically

<json-viewer id="json"></json-viewer>

<script>
    document.querySelector('#json').data = { prop1: true, prop2: 'test' };
</script>

Basic interactions

const viewer = document.querySelector('#json');

// Expand/collapse/filter
viewer.expand('**.name');
viewer.collapse(/name/);
viewer.filter('test.*.name');

// Search
const searchIterator = viewer.search('value');
// Scrolls to the node and highlight the value
searchIterator.next();

Theming

中 可以通过更改 CSS 变量来修改组件的外观

json-viewver {
    /* Background, font and color */
    --background-color: #2a2f3a;
    --color: #f8f8f2;
    --font-family: monaco, Consolas, 'Lucida Console', monospace;

    /* Types colors */
    --string-color: #a3eea0;
    --number-color: #d19a66;
    --boolean-color: #4ba7ef;
    --null-color: #df9cf3;
    --property-color: #6fb3d2;

    /* Collapsed node preview */
    --preview-color: rgba(222, 175, 143, 0.9);

    /* Search highlight color */
    --highlight-color: #6fb3d2;
}

Demo

也可以在本地运行演示

npm run start