JSFiddle - React, Tailwind, and code Playground

by rishi007bansod

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc8.js"></script>
<script type="text/ng-template"  id="tree_item_renderer.html">
    {{data.name}}
    <button ng-click="add(data)">Add node</button>
    <button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
    <ul>
        <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
    </ul>
</script>

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<ul ng-app="Application" ng-controller="TreeController">
    
    <li ng-repeat="data in tree" ng-model="json" ng-include="'tree_item_renderer.html'"></li>
    
</ul>

CSS

ul {
  list-style: circle;
}

li {
  margin-left: 20px;
}

JavaScript

angular.module("myApp", []).
controller("TreeController", ['$scope', function($scope) {
    $scope.delete = function(data) {
        data.nodes = [];
    };
    $scope.add = function(data) {
        var post = data.nodes.length + 1;
        var newName = data.name + '-' + post;
        data.nodes.push({name: newName,nodes: []});
    };
    
 
    $scope.tree = [{name: "myTree", nodes: []}];
    
    
    var json;
   	
    
    
    
    function flatObject(obj,myTree) {
    Object.keys(obj).forEach(y => {
        console.log('key: ' + y)
				
				if (obj[y] instanceof Object) {
          for(var i=0; i < myTree.length; i++) {
              myTree[i].nodes.push({name: y,nodes: []});
              flatObject(obj[y], myTree[i].nodes);
          }
        } else {
           for(var i=0; i < myTree.length; i++) 
           {
           		myTree[i].nodes.push({name: y,nodes: [obj[y]]});
           		console.log('value: ' + obj[y])
           }
        }
    });
}
    
    document.getElementById('files').addEventListener('change', handleFileSelect, false);

    function handleFileSelect(evt) {
      var files = evt.target.files; // FileList object

      // files is a FileList of File objects. List some properties.
      var output = [];
      for (var i = 0, f; f = files[i]; i++) {
        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function (theFile) {
          return function (e) {
            console.log('e readAsText = ', e);
            console.log('e readAsText target = ', e.target);
            try {
              json = JSON.parse(e.target.result);
              var myTree = [{name: "my_Tree", nodes: []}];
              flatObject(json,myTree);
              
              $scope.$apply(function() {
                $scope.tree = myTree;
              });
              
              alert('json global var has been set to parsed json of this file here it is unevaled = \n' +...