Angular JS render JSON in tree like format

All we need is an easy explanation of the problem, so here it is.

How do I render JSON in tree like way just like does using angular JS?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

I’ve made this Angular directive for rendering JSON in a nice way. It’s available in bower:

enter image description here

Method 2

The technique you are interested in is ‘recursive directive‘. If you don’t know how to write a directive yet, then you should start learning it first. The official Angular JS doc got a lot better in explaining about directive Creating Custom Directives

Once you know how to write custom directive, you can learn about recursive directive. I found this Google Groups thread helpful: Recursive directives. Especially, I found Mark Lagendijk’s Recursion Helper service in that thread very useful.

Make sure to checkout the examples there. Some relevant examples for you are:


In the jsfiddle example above, take a look at:

module.directive("tree", function($compile) {
    return {
        restrict: "E",
        transclude: true,
        scope: {family: '='},
            '<ul>' + 
                '<li ng-transclude></li>' +
                '<p>{{ }}</p>' + 
                '<li ng-repeat="child in family.children">' +
                    '<tree family="child"></tree>' +
                '</li>' +
        compile: function(tElement, tAttr, transclude) {
            var contents = tElement.contents().remove();
            var compiledContents;
            return function(scope, iElement, iAttr) {
                if(!compiledContents) {
                    compiledContents = $compile(contents, transclude);
                compiledContents(scope, function(clone, scope) {

Some of the code above is abstracted away by Mark Lagendijk’s Recursion Helper service I mentioned above.

Lastly, I implemented angular-json-human, which renders JSON in a nested table structure, which makes it easier for human to read. You can modify it to suit your need. The demo is here and the repo is here

Hope this helps!

Method 3

I wrote a function to display a JSON data in the angular-ui-tree component.

The key point is the following:

In your parse routine, keep the ‘JSON string’ of the current node in the node itself, every ‘not parsed’ node has this payload and a ‘load’ function.

function parse(name, value) {

  var node = {
    name: name

  if (Array.isArray(value)) {
    node.isEmpty = value.length === 0;
    node.payload = value;
    node.props = [];
    node.load = function(node) {
      for (var i = 0; i < node.payload.length; i++) {
        node.props.push(parse( + '[' + i + ']', node.payload[i]));
      delete node.isEmpty;
      delete node.payload;
  } else if (value !== undefined && value !== null && typeof value === 'object') {
    node.isEmpty = Object.keys(value).length === 0;
    node.payload = value;
    node.props = [];
    node.load = function(node) {
      var keys = Object.keys(node.payload);
      for (var i = 0; i < keys.length; i++) {
        node.props.push(parse( + '.' + keys[i], node.payload[keys[i]]));
      delete node.isEmpty;
      delete node.payload;
  } else {
    node.value = value;

  return node;

Then, when the user click on the toggle button you can call this function to parse the next nodes in the tree and bind tha data to the HTML.

Can be more clear with a example:

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply