The jsontreeviewer from summerstyle

AngularJS Directive

this is not a bug, but a contribution.
I made an angularjs directive for this.

.directive('jsonTree', function () {
     return {
         restrict: 'EA',
         scope: {
             data: '=',
             expandall: '&',
             collapseall: '&'
         },
         template: '<div></div>',
         link: function ($scope, element, attrs) {
             var tree;
            tree = jsonTree.create($scope.data, element[0]);
         } 
     }
 });

html syntax:
<div json-tree data="inspector.reqbody">Invalid json-data, check RAW format</div>

data is the json object.

obviously collapseall and expandall functionality is not there yet, but this is a good starting point

findAndHandle ?

The readme has no mention of the findAndHandle method, and what the matcher, or handler functions need to be, or contain.

Could you provide some example or definition for that? Thanks

This control would be particularly useful for developers. Developers are power users. Developers get annoyed when the values that they're working with have to be typed out manually instead of copied and pasted.

Parent count

Just a suggestion, I dont know how to make it on github. When you want to open up to a certain level, it's not the number of children that counts, it's the number of parents. There should be something the developper could write like this:

tree.expand(function(node) {
   return node.parents.length < depth;
}

Here's a working thing that you can easily include in your source code like parents() with a "s" or something:

var get_nb_parents = function(node) {
    var n = node,
        retour = 0;
    while (n.parent !== null) {
        n = n.parent;
        retour++
    }
    return retour;
};
tree.expand(function (node) {
    return get_nb_parents(node) < max_level;
});

Добавить разные способы загрузки json

с сайта
из файла

и сделать возможным отображение ТОЛЬКО ключей?

Some better things

strings which starts with "http://" displays as link
nodes with label "color" displays with circle of color in value at right side
numbers displays as "123 000 000" with spaces
nodes with label "image" by mouseover shows images preview
etc.

Add "find and get as array" feature. Not nodes marks, only result displays as array.
Change app.js' styles and class names. Now this is very ugly!

autoload

with http://summerstyle.github.io/jsonTreeViewer#<url>

Doesn't escape HTML entities

jsonTree.js will print out HTML content to the page as is rather than escaping the HTML entities. This results in the HTML being inserted into the DOM and presented, and allows some types of custom Javascript execution. This constitutes an XSS vulnerability for any pages that render user-provided JSON using this library.

For example, on your demo page at http://summerstyle.github.io/jsonTreeViewer/ - provide the input {"test":"<img src='x' onerror='alert(1)'>"} and observe the alert.

Добавить возможность отрисовывать сразу несколько json-деревьев (в этом случае как работать с верхним меню? Вариант - выделять одно из деревьев. Также можно сделать 2 галочки - для одновременное операции с деревьями)
Сделать возможным загружать json по url и из текстового файла?
Сделать фильтрацию узлов (для выделения их цветом)
Сделать сортировку по ключам
По галочке скрывать/показывать необязательные узлы
Ползунок для раскрытия дерева по уровням (сдвигаем - по одному уровню раскрывать узлы)

Big refactoring

CSS:

with prefix (jsontree- or jst-)
support color themes
good structure

JS constructors:

use templates
change inheritance

You've forgotten "recursive"

Your expand function wasn't 100% working. Here's a working version of your expand Tree function:

        /**
         * Expands all tree nodes (objects or arrays) recursively
         *
         * @param {Function | undefined} filterFunc - 'true' if this node should be expanded
         * @param {Object | undefined} node - starting node if precised
         */
        expand : function(filterFunc, node) {
            var self = this,
                n = (typeof(node) === 'undefined' ? this.rootNode : node);
            if (!n.isComplex) {
                return;
            }
            if (typeof(filterFunc) === 'function') {
                if (filterFunc(n)) {
                    n.expand();
                    n.childNodes.forEach(function(item) {
                        self.expand(filterFunc, item);
                    });
                } else {
                    n.collapse();
                }
            } else {
                n.expand();
                n.childNodes.forEach(function(item) {
                    self.expand(filterFunc, item);
                });
            }
        },

summerstyle / jsontreeviewer Goto Github PK

jsontreeviewer's People

Contributors

Stargazers

Watchers

Forkers

jsontreeviewer's Issues

Recommend Projects

Recommend Topics

Recommend Org