JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<body ng-app="myApp">
  Hello World!
  <div ng-controller="MyController as myCtrl">
    <ul ng-bind-html="myCtrl.HTMLTree(myCtrl.myTree)">
    </ul>
  </div>
</body>

JavaScript

myApp = angular.module('myApp', []);


myApp.controller('MyController', function($scope, $sce) {
  var self = this;

  self.myTree = {
    "category": {
      "name": "A",
    },
    "children": [{
      "category": {
        "name": "B",
      },
      "children": []
    }, {
      "category": {
        "name": "C",
      },
      "children": []
    }]
  }

  self.HTMLTree = function(jsonTree) {
    var retStr = '<li>' + jsonTree.category.name;
    if (('children' in jsonTree) && (jsonTree.children.length > 0)) {
      retStr += '<ul>';
      for (childIndex = 0; childIndex <= jsonTree.children.length - 1; childIndex++)
        retStr += self.HTMLTree(jsonTree.children[childIndex]);
      retStr += '</ul>';
    }
    retStr += '</li>';
    return $sce.trustAsHtml(retStr);
  }
});