You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+52-27Lines changed: 52 additions & 27 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,26 +1,26 @@
1
-
# Angular JSON Tree
1
+
# Angular User Friendly JSON Tree
2
2
3
-
This plugin was created to address a common development issue: how to easily visualize JSON/JS Object trees. From a development standpoint, when querying API endpoints and wishing to easily visualize the response object—or from a design standpoint, when looking for an easy way to display a complex object—this plugin provides an easy to use directive for displaying the Object tree response.
3
+
This plugin allows an easily way to visualize JSON/JS Object trees, in a user friendly manner. From a development standpoint, when querying API endpoints and wishing to easily visualize the response object—or when looking for an easy way to display a complex object—this plugin provides an easy to use directive for displaying, in a user friendly way, the Object tree response.
4
4
5
5
This is nice and easy because all you should have to do is include the directive in your app, and then pass a reference to the directive of which object on the scope you want it to display.
6
6
7
7
A live implementation of this directive can be found at [http://blog.alexwendland.com/angular-json-tree/](http://blog.alexwendland.com/angular-json-tree/) and the source for that project can be found on the [gh-pages branch](https://github.com/awendland/angular-json-tree/tree/gh-pages).
I was searching for a way to easily display the JSON results from an API endpoint. The objects were dynamic and followed no uniform pattern. Thus I created this AngularJS directive. Given the above input (from Usage), it would produce an expandable object similar to:
58
+
I was searching for a way to easily display the JSON results from an API endpoint, in a user friendly way. The objects were dynamic and followed no uniform pattern. Thus I created this AngularJS directive. Given the above input (from Usage), it would produce an expandable object similar to:
51
59
52
60
53
61
54
-
This directive helps me with another problem while developing: visualizing JSON objects. Being able to break down JSON objects piece by piece has proven invaluably useful. To simplify that process, I threw together this website: [http://blog.alexwendland.com/angular-json-tree/](http://blog.alexwendland.com/angular-json-tree/).
62
+
This directive helps me with another problem while developing: visualizing JSON objects in a user friendly way. Being able to break down JSON objects piece by piece has proven invaluably useful. To simplify that process, I threw together this website: [http://blog.alexwendland.com/angular-json-tree/](http://blog.alexwendland.com/angular-json-tree/).
55
63
56
64
## Directive Configuration:
57
65
These attributes are available for configuration on the directive:
58
66
67
+
59
68
### object [required]
60
69
61
70
The object property takes the name of an object on the $scope. This object will be displayed as an expandable tree.
The object property takes the name of an options object on the $scope. This object allows the following customizations:
79
+
* expandable nodes (branches) label text (`toggleBranchText` option). Default value is "click to expand"
80
+
* date format for leaf fields values of type `Date` (`dateFormat` option). The directive considers a leaf node to be of type `Date`, if the node's name ends with the word "Date" and its value is a date in milliseconds. The Default value of this options is the ISO 8601 format "yyyy-MM-dd HH:mm:ss"
81
+
* a user friendly text to represent empty values of nodes (`emptyValueText` option). Default value is "none"
This is an optional attribute that designates if the tree's root should display as expanded initially. This is useful when you are only showing one json-tree, but would probably be set to false if json-trees were being created with an ng-repeat loop.
This is an optional attribute that sets the title displayed at the root node. This is useful when you are showing sub-portions of an object or want the object root node to have a different string than 'Object'.
The default CSS is separated into two parts: structure and looks. The looks section can be easily modified in order to change font, color and toggle buttons. The structure section can also be modified, but some more care will be needed because it provides the framework from which this directive provides functionality. The looks framework will be covered here while the structure framework will only be touched on.
86
107
87
-
The json-tree is based on recursive nodes of two basic structures. The first structure is for nodes that have no subnodes themselves (a leaf), and the other is for nodes that have children (a branch). Here the simplified template structures for each, with appropriate, style-able, class names.
108
+
The user-friendly-json-tree is based on recursive nodes of two basic structures. The first structure is for nodes that have no subnodes themselves (a leaf), and the other is for nodes that have children (a branch). Here the simplified template structures for each, with appropriate, style-able, class names.
88
109
89
110
### Leaf Nodes
90
111
91
112
```html
92
-
<json-nodeclass="not-expandable">
113
+
<user-friendly-json-nodeclass="not-expandable">
93
114
<spanclass="key">{{key}}</span>
94
115
<spanclass="leaf-value">{{value}}</span>
95
-
</json-node>
116
+
</user-friendly-json-node>
96
117
```
97
-
In the default CSS, all `.key` elements have the same style, a bold red color. There is some padding, and then the property's value follows. By default, no special styling is applied to `.lead-value` elements.
118
+
In the default CSS, all `.key` elements have the same style, a bold blue color. There is some padding, and then the property's value follows. By default, no special styling is applied to `.lead-value` elements.
98
119
99
120
### Branch Nodes
100
121
101
122
Branch nodes have two states: expanded or not-expanded. The not-expanded state is very similar to the leaf nodes and simply exchanges the `.leaf-value` class for `.branch-preview`.
102
123
103
124
```html
104
-
<json-nodeclass="not-expandable">
125
+
<user-friendly-json-nodeclass="not-expandable">
105
126
<spanclass="key">{{key}}</span>
106
127
<spanclass="branch-preview">{{value}}</span>
107
-
</json-node>
128
+
</user-friendly-json-node>
108
129
```
109
130
In the default CSS, `.branch-preview` elements are italicized, concatenated, hidden overflow, and reduced in opacity.
110
131
111
132
The expanded state is different and contains further subnodes that are generated with ng-repeat:
The `.expandable` class adds several features to the normal `json-node` element. Particularly, by the default looks CSS, a carrot-style toggle pseudo-element will be created. This `::before` element will rotate 90 deg downward when the element is expanded.
144
+
The `.expandable` class adds several features to the normal `user-friendly-json-node` element. Particularly, by the default looks CSS, a carrot-style toggle pseudo-element will be created. This `::before` element will rotate 90 deg downward when the element is expanded.
124
145
125
-
Additionally, `json-node` elements receive a class corresponding to their object type. For example, the `.array` class or `.object` may be placed on a `json-node`. These classes can be used for special stylings.
146
+
Additionally, `user-friendly-json-node` elements receive a class corresponding to their object type. For example, the `.array` class or `.object` may be placed on a `user-friendly-json-node`. These classes can be used for special stylings.
126
147
127
148
## Further Explanation:
128
149
129
150
An example implementation of this project can be found at the [gh-pages branch](https://github.com/awendland/angular-json-tree/tree/gh-pages) of this repository.
130
151
131
152
## Changelog
132
153
154
+
#### v2.0.0
155
+
* Changed *npm* and *bower* packages names
156
+
* Changed JSON/JS Object tree visualization to be user friendly
157
+
133
158
#### v1.0.0
134
159
* Update *npm* dev dependencies to latest (as of 2016-05-24) and remove unnecessary ones
135
160
* Update *angular* dependency to accept all 1.x versions
0 commit comments