Я написал код javascript, который принимает файл с записью json в качестве входных данных и генерирует древовидную структуру для него. Ниже приводится скрипка для того же:
https://jsfiddle.net/rishi007bansod/wk8nx21t/63/
Вы можете проверить это, указав следующий файл в качестве ввода
https://jsoneditoronline.org/?id=fd7cf89cd7f3469dbcd318575a86d7cc
Теперь я хочу сделать эту древовидную структуру разборной, чтобы узлы в этом json могли расширяться / сворачиваться. Для реализации этого я ссылаюсь на код:
Базовый складной
Я также пытался использовать эту базовую разборную функцию, следующий код для нее:
HTML
<script type="text/ng-template" id="tree_item_renderer.html">
<button data-toggle="collapse" data-target="#demo">{{data.name}}</button>
<button ng-click="add(data)">Add node</button>
<button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
<div id="demo" class="collapse">
<ul>
<li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
</ul>
</div>
</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-include="'tree_item_renderer.html'"></li>
</ul>
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) {
console.log('==========tree length is: ' + myTree.length)
var count = 0;
Object.keys(obj).forEach(y => {
console.log('key: ' + y)
if (obj[y] instanceof Object) {
//for(var j = 0; j < myTree.length; j++)
{
console.log('printing key: ' + y+", value :"+obj[y])
myTree.nodes.push({name: y,nodes: []});
console.log('tree length: ' + myTree.length)
flatObject(obj[y], myTree.nodes[count]);
}
} else {
//for(var j = 0; j < myTree.length; j++)
{
console.log('....printing key: ' + y+", value :"+obj[y])
myTree.nodes.push({name: y,nodes: [{name: obj[y], nodes: []}]});
console.log('value: ' + obj[y])
console.log('tree length: ' + myTree.length)
}
}
count++;
});
}
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[0]);
$scope.$apply(function() {
$scope.tree = myTree;
});
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);
reader.readAsText(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
}]);
CSS
ul {
list-style: circle;
}
li {
margin-left: 20px;
}
Ниже приводится код для вышеуказанного кода,
https://jsfiddle.net/rishi007bansod/wk8nx21t/65/
Но он не работает должным образом, т. Е. Я не могу развернуть и свернуть узлы в дереве json. Как я могу исправить этот код?