Статьи

Онлайн JSON Tree Viewer Tool — Учебное пособие

Ноябрь 2, 2018

json-tree-viewer-logo

Я разработал полезный плагин Tool, который может принимать объект JSON и отображать данные для отображения в древовидной иерархии. Отлично подходит для поиска пути узлов в больших объектах JSON.

Характеристики

  • Введите свой JSON, загрузив файл JSON или скопировав и вставив.
  • Расширяемый вид дерева.
  • Наведите указатель мыши на узлы, чтобы увидеть путь к переменной.
  • Нажмите, чтобы скопировать полный путь к узлу.
  • Укажите пользовательский разделитель для пути к узлу копирования.


Онлайн инструмент для просмотра дерева JSON

Пример создания вызовов дерева JSON

Если вы хотите создать свои собственные деревья, это то, как вы можете их создать. JSONTREEVIEWER является основным пространством имен. 

$(function () { //Initialise JQUERY4U JSON Tree Viewer JSONTREEVIEWER.init(); //Events to load example files $('#example1').bind('click', function () { JSONTREEVIEWER.processJSONTree('one-level.json'); }); });

Основная функция для обработки дерева JSON

Эта функция определяет, где взять JSON: 1) загрузка файла; или 2) копировать и вставлять; 3) примеры файлов. 

 /*Load the JSON file either by upload or example file and process tree*/ processJSONTree: function (filename) { $('#loading').show(); var data = '', branches = ''; if (filename === 'copyandpastejson') { var copypastejson = $('#copyandpastejson').val(); /*validate JSON*/ if (JSONTREEVIEWER.isValidJSON(copypastejson)) { data = copypastejson; } else { return false; } if (data === false) { return false; } /*Build JSON Tree*/ JSONTREEVIEWER.buildTree(JSONTREEVIEWER.processNodes(jQuery.parseJSON(data)), filename); } else { //get the JSON file from file upload $.ajax({ type: 'GET', url: filename, async: false, beforeSend: function (x) { if (x && x.overrideMimeType) { x.overrideMimeType('application/j-son;charset=UTF-8'); } }, dataType: 'json', success: function (data) { /*Build JSON Tree*/ JSONTREEVIEWER.buildTree(JSONTREEVIEWER.processNodes(data), filename); }, error: function (e) { /*Invalid JSON*/ alert('Invalid JSON: ' + e.responseText); JSONTREEVIEWER.showErrorMsg(); return false; } }); } },

Функция построения дерева

Эта функция строит дерево из веток и отображает их на странице. 

 /*Build JSON Tree*/ buildTree: function (branches, filename) { //console.log('branches' + branches); if (typeof branches !== 'undefined' || branches !== '') { $('#browser').empty().html(branches); $('#browser').treeview({ control: '#treecontrol', add: branches }); $('#selected_filename').html('(' + filename + ')'); $('#loading').hide(); $('#browser-text').hide(); } else { $('#selected_filename').html('Please select JSON file above...'); $('#loading').hide(); } },

Функция рекурсии ветки JSON

Эта функция довольно сложна и требует времени для написания кода. Он в основном принимает каждый объект JSON рекурсивно, определяет тип и создает HTML для ветвей. 

 /*Process each node by its type (branch or leaf)*/ processNodes: function (node) { var return_str = ''; switch (jQuery.type(node)) { case 'string': if ($('#hierarchy_chk').is(':checked')) { return_str += '
  • ‘+ узел +’

«;
} еще {
return_str + = ‘

  • ‘+ узел +’

«;
}
перемена;
case ‘array’:
$ .each (узел, функция (элемент, значение) {
return_str + = JSONTREEVIEWER.processNodes (this);
});
перемена;
дефолт:
/ * Объект * /
$ .each (узел, функция (элемент, значение) {
if ($ (‘#ierarchy_chk’). is (‘: checked’)) {
return_str + = ‘

  • ‘+ item +’ ‘;
    return_str + = JSONTREEVIEWER.processNodes (this);
    return_str + = ‘

«;
} еще {
return_str + = JSONTREEVIEWER.processNodes (this);
}
});
} / * Очистить все неопределенные элементы * /
return_str = return_str.replace (‘undefined’, »);
return return_str;
},

Проверьте, действительно ли JSON

Вспомогательная функция, чтобы проверить, является ли они JSON действительными, и отобразить сообщение, если оно недействительно. 

 /*Helper function to check if JSON is valid*/ isValidJSON: function (jsonData) { try { jsonData = jQuery.parseJSON(jsonData); //console.log('valid json'); return true; } catch (e) { //console.log('invalid json'); alert(e); JSONTREEVIEWER.showErrorMsg(); return false; } },

Получить путь узла

Эта функция рекурсивно ищет HTML-код для создания пути ветвления узла. 

 /*jQuery function to create path function used to get the path of the node in the tree*/ jQuery.fn.extend({ getPath: function (path) { /*The first time this function is called, path won't be defined*/ if (typeof path == 'undefined') path = ''; /*Add the element name*/ var cur = this.get(0).nodeName.toLowerCase(); var id = this.attr('id'); /*Add the #id if there is one*/ if (typeof id != 'undefined') { /*escape goat*/ if (id == 'browser') { return path; } } var html = this.html(); if (html.search('
  • ‘+ путь);
    } еще {
    вернуть this.parent (). getPath (path);
    }
    }
    });

    • События

    Несколько функций для обработки событий, когда пользователь загружает файл JSON или наводит курсор на дерево. 

     /*change event when user changes file upload input*/ $('#loadfile').live('change', function () { JSONTREEVIEWER.processJSONTree($(this).val()); }); /*store nodepath value to clipboard (copy to top of page)*/ $('#browser li').live('click', function () { var path = $('#pathtonode').html(); var pathdelim = $('#pathdelim_chk').val(); path = path.replace(/ > /g, pathdelim); JSONTREEVIEWER.addtoppath(path); }); /*mouse IN hover to show path of node*/ $('#browser li span').live('mouseenter', function () { $('#pathtonode').html(JSONTREEVIEWER.getNodePath(this)); $('#pathtonode').show(); }); /*mouse OUT hover to show path of node*/ $('#browser li span').live('mouseleave', function () { $('#pathtonode').empty(); $('#pathtonode').hide(); });

    Требования

    Я использовал плагин jquery.treeview.async.js для создания расширяемого дерева.

    Скачать источник

    41
    Share: