☰

JSON Viewer

格式化显示JSON使数据看起来更加漂亮，支持折叠/展开格式化后的数据，支持JSON脑图让调用层级看着更清晰，支持复制JSON脑图节点路径

当前为 2024-09-14 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @license      MIT
  3. // @name         JSON Viewer
  4. // @namespace    http://tampermonkey.net/
  5. // @version      0.4.8
  6. // @note         v0.4.8 代码优化
  7. // @note         v0.4.7 增加对JSONP的判断，代码优化
  8. // @note         v0.4.6 增加复制按钮，JSON脑图CSS样式细节优化，JSON脑图增加收起/展开子节点按钮
  9. // @note         v0.4.5 在json-viewer-updated原基础上进行了一些修改，主要有CSS样式修改，新增折叠/展开全部功能，新增JSON脑图功能，脑图节点点击显示调用路径
  10. // @description   格式化显示JSON使数据看起来更加漂亮，支持折叠/展开格式化后的数据，支持JSON脑图让调用层级看着更清晰，支持复制JSON脑图节点路径
  11. // @author       Feny
  12. // @match        *://*/*
  13. // @grant        GM_addStyle
  14. // @grant        GM_getResourceText
  15. // @grant        GM_setClipboard 
  16. // @icon         data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAeAB4AAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAEAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAgACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9wvjF8bLX4ZrHZx+XNqlwnmKjH5YUyRvb6kEAd8H058d1b47XV5Ir3eoN++bagaXYrN6KOBn2FfPPx5/aEutX8a+KNWhIubhruZLSNj8u1WMcIOP4QoXOOwNS/wDBM79lDTfjh8YNe+IXj63TxRdeHfKjsE1KMTxtdSbmMmxvlAiVV2IBsUybgAyKR9ZTy6lhsM69Xovm2+iPmKmOqYjEKjT6v5WXU9e8beKrjxZpp/s/xFrfhjWIwWs9X0q42z2kmPlZo2zDcxjqYZ0eNv7obDDf/YL/AG8L745eJNc+G3xCttP0n4qeEWZZ2sVZNP8AENsu0rd2ysS0ZKPG7RMSQsisCcukWd+3x4RtfhpqGk+JNPjS0g1mV7a8iT5UM4XesgHYsofdjglQepJPxwPE1x4V/au8LePtNkeK40ma0lmdDgyorvHMhPo9uxjP+y1bUcHRxmGbS1adn1TXT0/4fcipiqmExCi3pfVdGn19f+GLni/w7ceGf2wPFXga+Vo5rW/vDbI3WWI/v4HA/wBqBg3tk+lfWX7AXia1+F/iDV9B1CRbWHXjFLayyHannpuUxk+rqy4zxlMdWAPQft7fsL33x91nQfiD4DutP0r4oeDXVrT7cWWx1y3UsTZ3LKCyAh5FEigkLLIpHzBk5vwj4JuvE2kLJfeHdY8N6lGAl5pepwBZrOT+JRIuYp0ByBNCzxPg4bIICqYyljMKot62Sa6prr6P/gBDC1MLiHJLS90+jT6ev/Dnmn/BVP8Aaw0nxv4/8P8Aw18KXK69qmk3MlxqEdiRMwuivlpbrtPLopkMnZNy5IIYLyPwa/Z8vvEmv+HtHu4/Ovr+5iS6KDcqAtukwe6om7nuEJxX0XoH7PK/bJG0vRoY5rr/AFslvbLGZf8AfcAf+PGvafgv8CbX4byNqFyI5tWmXYCoytsh6qvqx7t+A4yWiWYUsLhlRpbr72318kVHA1MTiHVqbP7kl0P/2Q==
  17. // @require      https://code.jquery.com/jquery-3.4.1.min.js
  18. // @require      https://unpkg.com/layer-src@3.5.1/dist/layer.js
  19. // @require      https://unpkg.com/jsmind@0.8.5/es6/jsmind.js
  20. // @resource     swalStyle https://unpkg.com/jsmind@0.8.5/style/jsmind.css
  21. // @resource     layerStyle https://unpkg.com/layer-src@3.5.1/dist/theme/default/layer.css
  22. // ==/UserScript==
  23.  
  24.  
  25. /*随机字符串*/
  26. function randomString(e) {
  27.     var e = e || 32,
  28.     t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
  29.     a = t.length,
  30.     n = "";
  31.     for (i = 0; i < e; i++){
  32.         n += t.charAt(Math.floor(Math.random() * a));
  33.     } 
  34.     return n
  35. }
  36. /*检查是否是图片链接*/
  37. function isImg(pathImg) {
  38.     var regexp = /^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?\/([\w#!:.?+=&%@!\-\/])*\.(gif|jpg|jpeg|png|GIF|JPG|PNG)([\w#!:.?+=&%@!\-\/])?/;
  39.     return regexp.test(pathImg);
  40. }
  41. /** 检验内容是否是json格式的内容*/
  42. function isJSON(str) {
  43.     if (typeof str == 'string') {
  44.         try {
  45.             var obj = JSON.parse(str);
  46.             if(typeof obj == 'object' && obj ){
  47.                 console.log("is json")
  48.                 return true;
  49.             }else{
  50.                 console.log("is not json")
  51.                 return false;
  52.             }
  53.  
  54.         } catch(e) {
  55.             console.log("is not json", e)
  56.             return false;
  57.         }
  58.     }
  59. }
  60.  
  61. // jquery.json-viewer 插件 开始
  62. // 解决和原网页jquery版本冲突
  63. var jq = jQuery.noConflict(true);
  64. (function(jq){
  65.     /**
  66.      * 检查 arg 是否为至少包含 1 个元素的数组或至少包含 1 个键的字典
  67.      */
  68.     function isCollapsable(arg) {
  69.         return arg instanceof Object && Object.keys(arg).length > 0;
  70.     }
  71.  
  72.     /**
  73.      * 检查字符串是否为URL
  74.      */
  75.     function isUrl(string) {
  76.         var regexp = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
  77.         return regexp.test(string);
  78.     }
  79.  
  80.     /**
  81.      * 将 JSON 对象转换为 HTML 表示形式
  82.      * @return string
  83.      */
  84.     function json2html(json) {
  85.         var html = '';
  86.         if (typeof json === 'string') {
  87.             /* Escape tags */
  88.             json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  89.             if (isUrl(json)){
  90.                 html += `<a href="${json}" class="json-string">"${json}"</a>`;
  91.             }
  92.             else{
  93.                 html += `<span class="json-string">"${json}"</span>`;
  94.             }
  95.         }
  96.         else if (typeof json === 'number') {
  97.             html += `<span class="json-number ">${json}</span>`;
  98.         }
  99.         else if (typeof json === 'boolean') {
  100.             html += `<span class="json-bool ">${json}</span>`;
  101.         }
  102.         else if (json === null) {
  103.             html += '<span class="json-null">null</span>';
  104.         }
  105.         else if (json instanceof Array) {
  106.             if (json.length > 0) {
  107.                 html += '<span class="b">[</span><ol class="json-array">';
  108.                 for (var i = 0; i < json.length; ++i) {
  109.                     html += '<li>';
  110.                     /* Add toggle button if item is collapsable */
  111.                     if (isCollapsable(json[i])) {
  112.                         html += '<a href class="json-toggle"></a>';
  113.                     }
  114.                     html += json2html(json[i]);
  115.                     /* Add comma if item is not last */
  116.                     if (i < json.length - 1) {
  117.                         html += ',';
  118.                     }
  119.                     html += '</li>';
  120.                 }
  121.                 html += '</ol><span class="b">]</span>';
  122.             }
  123.             else {
  124.                 html += '[]';
  125.             }
  126.         }
  127.         else if (typeof json === 'object') {
  128.             var key_count = Object.keys(json).length;
  129.             if (key_count > 0) {
  130.                 html += '<span class="b">{</span><ul class="json-dict">';
  131.                 for (var key in json) {
  132.                     if (json.hasOwnProperty(key)) {
  133.                         html += '<li>';
  134.                         /* Add toggle button if item is collapsable */
  135.                         if (isCollapsable(json[key])) {
  136.                             html += '<a href class="json-toggle"></a>';
  137.                         }
  138.                         html += `<span class="json-key">"${key}"</span>: ${json2html(json[key])}`;
  139.                         /* Add comma if item is not last */
  140.                         if (--key_count > 0){
  141.                             html += ',';
  142.                         }
  143.                         html += '</li>';
  144.                     }
  145.                 }
  146.                 html += '</ul><span class="b">}</span>';
  147.             }
  148.             else {
  149.                 html += '{}';
  150.             }
  151.         }
  152.         return html;
  153.     }
  154.  
  155.     jq.fn.jsonViewer = function(json, jsonpFunctionName) {
  156.         return this.each(function() {
  157.             /* Transform to HTML */
  158.             var html = json2html(json);
  159.             /** is JSONP */
  160.             if(jsonpFunctionName !== undefined && jsonpFunctionName !== null){
  161.                 html = `<div class="jsonp">${jsonpFunctionName}(</div>${html}<div class="jsonp">)</div>`
  162.             }
  163.             /* Insert HTML in target DOM element */
  164.             jq(this).html(html);
  165.  
  166.             /* Bind click on toggle buttons */
  167.             jq(this).off('click');
  168.             jq(this).on('click', 'a.json-toggle', function() {
  169.                 var target = jq(this).toggleClass('collapsed').siblings('ul.json-dict, ol.json-array');
  170.                 target.toggle();
  171.                 if (target.is(':visible')) {
  172.                     target.siblings('.json-placeholder').remove();
  173.                 }
  174.                 else {
  175.                     var count = target.children('li').length;
  176.                     var placeholder = count + (count > 1 ? ' items' : ' item');
  177.                     target.after('<a href class="json-placeholder">' + placeholder + '</a>');                    
  178.                 }
  179.                 return false;
  180.             });
  181.  
  182.             /* Simulate click on toggle button when placeholder is clicked */
  183.             jq(this).on('click', 'a.json-placeholder', function() {
  184.                 jq(this).siblings('a.json-toggle').click();
  185.                 jq(this).siblings('a.json-placeholder').remove();
  186.                 return false;
  187.             });
  188.         });
  189.     };
  190. })(jq);
  191. // jquery.json-viewer 插件 结束
  192.  
  193. (function() {
  194.     'use strict';
  195.  
  196.     var source = jq('pre[style="word-wrap: break-word; white-space: pre-wrap;"]').first();
  197.     
  198.     // 根据上面这一点没办法确定是需要添加json格式化工具，再加上对内容进行判断是不是json格式的内容
  199.     let rawText = source.html()
  200.     if(!rawText){
  201.         return
  202.     }
  203.  
  204.     // 判断是否为jsonp格式
  205.     let tokens = rawText.match(/^([^\s(]*)\s*\(([\s\S]*)\)\s*;?$/),
  206.         jsonpFunctionName = null;
  207.     if (tokens && tokens[1] && tokens[2]) {
  208.         jsonpFunctionName = tokens[1]
  209. 		rawText= tokens[2]
  210.     }
  211.  
  212.     // 如果是直接打开的json接口地址才需要格式化插件
  213.     if(source.length == 0 || !isJSON(rawText)){
  214.         return
  215.     }    
  216.  
  217.     // 随机rgb颜色
  218.     let rgbaColor = `${Math.random()*256}, ${Math.random()*256}, ${Math.random()*256}`
  219.     // 添加样式
  220.     GM_addStyle(GM_getResourceText('swalStyle'))
  221.     GM_addStyle(GM_getResourceText('layerStyle'))
  222.     GM_addStyle(`
  223.         #json-renderer {
  224.             line-height: 1.5;
  225.             font-size: 14px;
  226.             display: block;
  227.             font-family: monospace;
  228.             margin: 15px 30px;
  229.         }
  230.         .btnGroup, .jmBtnGroup{
  231.             position: fixed;
  232.             top: 30px;
  233.             right: 30px;
  234.         }
  235.         .btn {
  236.             border: 1px solid rgb(218, 220, 224);
  237.             box-sizing: border-box;
  238.             color: rgb(26, 115, 232);
  239.             cursor: pointer;
  240.             line-height: 28px;
  241.             float: left;
  242.             display: inherit;
  243.             padding: 0 10px;
  244.         }
  245.         .btn:hover {
  246.             background-color: rgb(210, 227, 252);
  247.         }
  248.         ul.json-dict,
  249.         ol.json-array {
  250.             list-style-type: none;
  251.             margin: 0 0 0 2px;
  252.             border-left: 1px dotted #5D6D7E;
  253.             padding-left: 24px;
  254.         }
  255.         .b {
  256.             font-weight: 700;
  257.         }
  258.         .jsonp{
  259.             margin-left: -30px;
  260.         }
  261.         .json-key {
  262.             /* color: #A31515;*/
  263.             color: #910F93;
  264.         }
  265.         .json-string {
  266.             /* color: #0b7500;*/
  267.             color: #4B8A4C;
  268.         }
  269.         .json-number  {
  270.             /* color: #164FF0;*/
  271.             color: #1a01cc;
  272.             font-weight: 600;
  273.         }
  274.         .json-bool{
  275.             color: #905;
  276.             font-weight: 600;
  277.         }
  278.         .json-null {
  279.             /* color: #F1592A;*/
  280.             color: #0031BC;
  281.             font-weight: 600;
  282.         }
  283.         a.json-toggle {
  284.             position: relative;
  285.             color: inherit;
  286.             opacity: 0.2;
  287.             text-decoration: none;
  288.         }
  289.         
  290.         a.json-toggle:hover {
  291.             opacity: 0.35;
  292.         }
  293.         a.json-toggle:active {
  294.             opacity: 0.5;
  295.         }
  296.         a.json-toggle:focus {
  297.             outline: none;
  298.         }
  299.         a.json-toggle:before {
  300.             top: 2.5px;
  301.             left: -15px;
  302.             position: absolute;
  303.             content: "";
  304.             display: block;
  305.             width: 0;
  306.             height: 0;
  307.             border-style: solid;
  308.             border-width: 5px 0 5px 8px;
  309.             border-color: transparent transparent transparent currentColor;
  310.             transform: rotate(90deg);
  311.         }
  312.         a.json-toggle.collapsed:before {
  313.             transform: rotate(0deg);
  314.         }
  315.         a.json-placeholder {
  316.             color: #aaa;
  317.             font-size: 13px;
  318.             padding: 0 1em;
  319.             text-decoration: none;
  320.         }
  321.         a.json-placeholder:hover {
  322.             text-decoration: underline;
  323.         }
  324.         #jsmind_container{
  325.             position: fixed;
  326.             z-index: 999;
  327.             top: 0;
  328.             left: 0;
  329.             display: none;
  330.             width: 100vw; 
  331.             height: 100%;
  332.             background:#F7F7F7
  333.         }
  334.         .jmBtnGroup{
  335.             z-index: 9999;
  336.             display: none;
  337.         }
  338.  
  339.         /**脑图自定义样式*/
  340.         jmnode{
  341.             display: flex;
  342.             align-items: center;
  343.             padding: 0 7px 0 22px;
  344.         }
  345.         jmnode{
  346.             color: #475872 !important;
  347.             box-shadow: none !important;
  348.             background-color: transparent !important;
  349.         }
  350.         jmnode:hover{
  351.             text-shadow: 1px 1px 1px currentColor;
  352.         }
  353.         jmnode.root {
  354.             padding: 0;
  355.             color: transparent !important;
  356.         }
  357.         jmnode:not(.root)::before, jmnode.root::before{
  358.             content: " ";
  359.             top: 50%;
  360.             position: absolute;
  361.             border-radius: 50%;
  362.             transform: translateY(-50%);
  363.         }
  364.         jmnode:not(.root)::before{
  365.             left: 0;
  366.             width: 15px;
  367.             height: 15px;
  368.             background: rgba(${rgbaColor}, 0.5);
  369.         }
  370.         jmnode.root::before{
  371.             left: 50%;
  372.             width: 18px;
  373.             height: 18px;
  374.             transform: translate(-18px, -50%);
  375.             background: rgba(${rgbaColor}, 0.7);
  376.         }
  377.         jmexpander{
  378.             margin-top: 1px;
  379.             line-height: 9px;
  380.         }
  381.  
  382.         .layui-layer-tips{
  383.             width: auto !important;
  384.         }
  385.  
  386.         .mind-array{
  387.             opacity: 0.5;
  388.             font-size: 12px;
  389.             padding-left: 5px;
  390.         }
  391.     `)
  392.  
  393.     source.attr("id", "json-source").hide()
  394.     // 将内容用eval函数处理下
  395.     var jsonObject = eval('(' + rawText + ')');
  396.     // 添加一个格式化显示的per元素
  397.     jq("body").append('<div id="json-renderer"></div>')
  398.     .append(`<div class="btnGroup"><input class="btn" type="button" value="复制" id="copyJson"/>
  399.         <input class="btn" type="button" value="折叠全部" id="collapseJson"/>
  400.         <input class="btn" type="button" value="JSON脑图" id="showMind"/>
  401.         <input class="btn" type="button" value="原文本" id="switchRawText"/></div>`)
  402.     // JSON脑图相关
  403.     .append(`<div id="jsmind_container"></div>
  404.         <div class="jmBtnGroup"><input class="btn" type="button" value="收起节点" id="collapseNode"/>
  405.         <input class="btn" type="button" value="展开节点" id="expandNode"/>
  406.         <input class="btn" type="button" value="返回" id="closeMind"/></div>`);
  407.  
  408.     // 调用格式化方法
  409.     jq('#json-renderer').jsonViewer(jsonObject, jsonpFunctionName);
  410.  
  411.     let btnEvent = {
  412.         // 复制JSON文本内容
  413.         copyJson: function(){
  414.             GM_setClipboard(JSON.stringify(jsonObject))
  415.             layer.msg('复制成功', {time: 1500})
  416.         },
  417.         // 折叠全部的JSON结构
  418.         collapseJson: function(e){
  419.             var that = jq(e), v = that.val();
  420.             if(v === "折叠全部"){
  421.                 jq('.json-toggle').not('.collapsed').click()
  422.             }else{
  423.                 jq('a.json-placeholder').click().remove();
  424.             }
  425.  
  426.             that.val(v === "折叠全部" ? "展开全部" : "折叠全部")
  427.         },
  428.         // 查看原始/格式化JSON内容
  429.         switchRawText: function(e){
  430.             var that = jq(e), v = that.val();
  431.             that.val(v === '原文本' ? "格式化" : "原文本")
  432.             jq('#json-source, #json-renderer').toggle();
  433.         },
  434.         // 显示JSON脑图
  435.         showMind: function(){
  436.             let isArr = false;
  437.             if(Array.isArray(jsonObject)){
  438.                 if(typeof jsonObject[0] !== 'object'){
  439.                     layer.msg('数据结构无法生成脑图', {time: 1000})
  440.                     return
  441.                 }
  442.                 isArr = true
  443.                 jsonObject = jsonObject[0]
  444.             }
  445.  
  446.             jq('.jmBtnGroup').show()
  447.             jq('#jsmind_container').fadeToggle(200);
  448.             document.documentElement.style.overflow='hidden';
  449.             
  450.             if(!window.jm){
  451.                 window.jm = new jsMind({
  452.                     mode :'side', 
  453.                     editable: false,
  454.                     container:'jsmind_container',
  455.                     view: {
  456.                         hmargin: 50, // 思维导图距容器外框的最小水平距离
  457.                         vmargin: 50,  // 思维导图距容器外框的最小垂直距离
  458.                         engine: 'svg', // 思维导图各节点之间线条的绘制引擎
  459.                         draggable: true, // 当容器不能完全容纳思维导图时，是否允许拖动画布代替鼠标滚动
  460.                         support_html : false, 
  461.                         line_color: '#C4C9D0',
  462.                     },
  463.                     layout: {
  464.                         vspace: 7, // 节点之间的垂直间距
  465.                         hspace: 150, // 节点之间的水平空间
  466.                     },
  467.                 });
  468.                 jm.show({
  469.                     "meta":{
  470.                         "name":"JSON脑图",
  471.                         "author":"1220301855@qq.com",
  472.                         "version":"1.0"
  473.                     },
  474.                     "format":"node_tree",
  475.                     /* 数据内容 */
  476.                     "data": {
  477.                         "id": "root",
  478.                         "topic": 'Response',
  479.                         "direction": "left",
  480.                         "children": convertToMind(jsonObject),
  481.                         "chain": isArr ? 'Response[i]' : 'Response'
  482.                     }
  483.                 });
  484.  
  485.                 // 脑图节点事件
  486.                 jq("jmnode").on('dblclick mouseover mouseout', function(event){
  487.                     let that = jq(this), 
  488.                         node = jm.get_node(that.attr('nodeid'))
  489.                     if(!node.parent){
  490.                         return
  491.                     }
  492.  
  493.                     switch(event.type){
  494.                         case 'dblclick':
  495.                             GM_setClipboard(mindChain(node))
  496.                             layer.msg('节点路径复制成功', {time: 1500})
  497.                             break;
  498.                         case 'mouseover':
  499.                             let s = `<b>节点路径（双击复制）</b><br/>${mindChain(node)}`
  500.                             layer.tips(s, that, {
  501.                                 time: 0,
  502.                                 tips: [2, '#1e2732']
  503.                             });
  504.                             break;
  505.                         default:
  506.                             layer.closeAll()
  507.                             break;
  508.                     }
  509.                 })
  510.             }
  511.         },
  512.         // 收起节点
  513.         collapseNode: () => jm.collapse_all(),
  514.         // 展开节点
  515.         expandNode: () => jm.expand_all(),
  516.         // 关闭JSON脑图
  517.         closeMind: function(){
  518.             jq('.jmBtnGroup').hide()
  519.             jq('#jsmind_container').fadeToggle(200);
  520.             document.documentElement.style.overflow='';
  521.         },
  522.     }
  523.     // 按钮点击事件
  524.     jq('.btn').click(e => btnEvent[e.target.id](e.target))
  525.  
  526.     // 所有a标签，看是否是图片，是图片生成预览图  
  527.     jq("a.json-string").hover(function(){
  528.         var that = jq(this), href = that.attr('href');
  529.         if(isImg(href)){
  530.             layer.tips(`<img src="${href}" />`, that, {
  531.                 time: 0,
  532.                 anim: 5,
  533.                 maxWidth: 500,
  534.                 tips: [2, '#d9d9d9']
  535.             });
  536.         }
  537.     }, () => layer.closeAll())
  538. })();
  539.  
  540.  
  541. /** JSON数据转换为jsMind所需要的数据结构 */
  542. function convertToMind(json){
  543.     let children = []
  544.     if(typeof json === 'object'){
  545.         for (let i = 0, keys = Object.keys(json); i < keys.length; i++){
  546.             let val = json[keys[i]];
  547.             if(val === null || ['string', 'number', 'boolean', 'undefined'].includes(typeof val)){
  548.                 children.push({
  549.                     id: keys[i] + '-' + randomString(10),
  550.                     topic: `${keys[i]}`,
  551.                     chain: keys[i]
  552.                 })
  553.             } else if(Array.isArray(val)){
  554.                 children.push({
  555.                     id: keys[i] + '-' + randomString(10),
  556.                     topic: `${keys[i]}<span class="mind-array">[${val.length}]</span>`,
  557.                     chain: keys[i],
  558.                     isArray: true,
  559.                     children: convertToMind(val[0], keys[i])
  560.                 })
  561.             } else if(typeof val === 'object'){
  562.                 children.push({
  563.                     id: keys[i] + '-' + randomString(10),
  564.                     topic: `${keys[i]}`,
  565.                     chain: keys[i],
  566.                     children: convertToMind(val, keys[i])
  567.                 })
  568.             }
  569.         }
  570.     }
  571.     return children;
  572. }
  573. // 脑图节点调用链
  574. function mindChain(node){
  575.     let s = node.data.chain
  576.     if(!node.parent){
  577.         return s
  578.     }
  579.  
  580.     let p = node.parent, r = mindChain(p)
  581.     s = p.data.isArray ? `${r}[i].${s}` : `${r}.${s}`
  582.     return s
  583. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址