JSFiddle - React, Tailwind, and code Playground

by rishi007bansod

HTML

<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="file" name="file"/>
<button ng-click="add()">Add</button>

<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: "Node", nodes: []}];
    
    $scope.add = function() {
    var f = document.getElementById('file').files[0],
        r = new FileReader();

    r.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);
					alert('json global var has been set to parsed json of this file here it is unevaled = \n' + JSON.stringify(json));
				} catch (ex) {
					alert('ex when trying to parse json = ' + ex);
				}
			}
		})(f);
		r.readAsText(f);
}
}]);