Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
angular-json-tree
Advanced tools
Readme
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.
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.
A live implementation of this directive can be found at https://awendland.github.io/angular-json-tree/ and the source for that project can be found on the gh-pages branch.
Requirements: AngularJS 1.2+
File Size: v1.1.0
angular-json-tree
as a dependency for your appangular.module('myApp', ['angular-json-tree'])
JavaScript:
$scope.someobj = {
greetings: ["hi", "hello", "welcome"],
parent: {
child: "name",
age: 42
}
};
HTML:
<json-tree object="someobj"></json-tree>
$ bower install angular-json-tree
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:
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/.
These attributes are available for configuration on the directive:
The object property takes the name of an object on the $scope. This object will be displayed as an expandable tree.
<json-tree object="someobj"></json-tree>
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.
<json-tree object="someobj" start-expanded="true"></json-tree>
Besides true
or false
, you can also set it to 'recursive'
to cause the entire tree to be expanded initially (instead of just the top level if true
was used).
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'.
<json-tree object="someobj" root-name="'Name'"></json-tree>
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.
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.
<json-node class="not-expandable">
<span class="key">{{key}}</span>
<span class="leaf-value">{{value}}</span>
</json-node>
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 .leaf-value
elements.
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
.
<json-node class="not-expandable">
<span class="key">{{key}}</span>
<span class="branch-preview">{{value}}</span>
</json-node>
In the default CSS, .branch-preview
elements are italicized, concatenated, hidden overflow, and reduced in opacity.
The expanded state is different and contains further subnodes that are generated with ng-repeat:
<json-node class="expandable">
<span class="key">{{key}}</span>
<ul class="branch-value">
<li ng-repeat>
<json-node>{{subnode values}}</json-node>
</li>
</ul>
</json-node>
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.
Furthermore, if an .expandable
element does not have any children, then .empty
will be added to the class list as well. This can be used to remove any expansion UI from nodes representing empty objects/arrays.
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.
An example implementation of this project can be found at the gh-pages branch of this repository.
start-expanded="'recursive'"
to cause the entire tree to be expanded initially (instead of just the top-level, which setting the value to true
previously allowed) (Issue #56)track by
to remove $$hashKey
attributes (Issue #59, PR #60).empty
to the class list of nodes that are expandable but have no children (Issue #63)main
entry in package.json.main
in bower.json and package.json properly so that this package can easily be included in bower and npm managed projects (Issue #7, PR #1)root-name
attribute on the directive. An evaluatable expression must be provided, such as root-name="'My name'"
.Thank you to Mark Lagendijk from StackOverflow for providing a service than assists in recursive directives. That post can be found here.
Also, thank you to chieffancypants for his angular-loading-bar project from which I used the README.md as inspiration for this (poor) one.
Licensed under the Creative Commons Attribution 4.0 International (CC-BY-4.0)
FAQs
Angular directive for displaying a JSON object in an expandable tree structure
The npm package angular-json-tree receives a total of 475 weekly downloads. As such, angular-json-tree popularity was classified as not popular.
We found that angular-json-tree demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.