JSFiddle - React, Tailwind, and code Playground

by manland

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-app="app"  ng-controller="TitleController">
    <div title="titles"></div>
</div>

JavaScript

var app = angular.module('app', []);

app.directive("title", [function() {
    function isArray(o) {
        return Object.prototype.toString.call(o) === '[object Array]';
    }
    
    function isObject(o) {
        return typeof o === 'object';
    }
    
    function buildTitles(titles, weigth) {
        var i, res="";
        console.log(titles);
        for(i=0; i<titles.length; i++) {
            if(isArray(titles[i])) {
                res += buildTitles(titles[i], weigth+1);
            } else if(isObject(titles[i])) {
                if(titles[i].h !== undefined) {
                    res += "<h"+weigth+">"+ titles[i].h + "</h"+weigth+">";
                }
                if(titles[i].o !== undefined) {
                    res += buildTitles(titles[i].o, weigth+1);
                }
            }
        }
        return res;
    }
    
  return {
    restrict: 'A',
    link: function(scope, element, attrs)  {
      var titles = scope[attrs.title];
      console.log('pass');
      console.log(buildTitles(titles, 1));
      element.html(buildTitles(titles, 1));
    }
  }
}]);

app.controller('TitleController', ["$scope", function($scope) {
    $scope.titles = [{h: "1",
                     o: [{h: "1.1",
                     o: [{h: "1.1.1"},
                         {h: "1.1.2"},
                         {h: "1.1.3"}]},
                         {h: "1.2",
                                    o: [{h: "1.2.1"},
                                        {h: "1.2.2"},
                                        {h: "1.2.3"}]}]}];
}]);