[英]Create a JSON object (hierarchical) from a tree structure -Updated code
我正在尝试创建一个随创建节点树而动态更新的JSON对象。 节点树将接受输入并将其附加到树中。 并且同时A json对象将使用值更新:json对象shoudl看起来像这样:
jsonData={children:[{value: 'abc', id: '123', children:[{value:'cde', id:345, children[]}
]}
]}
In my code the jsonData object gets updated,but I am not able to push the child objects to the appropriate parent object children property.
所有元素都是jsondata的子级。 我无法获得分层更新。
My code:
<style>
.collapse > * {
display: none;
}
.expand > * {
display:block;
}
</style>
<script>
var jsonData = {children:[]};
document.addEventListener('DOMContentLoaded', function () {
var div = document.createElement('div');
div.innerHTML = "[+]" + "Root";
div.name = "root";
createProps(div);
function recurseTree(temp, parent, depth, parentObj) {
console.log(parentObj);
var children = parent.children;
++depth;
for (var i = 0, len = children.length; i < len; i++) {
var child = children[i];
var element = document.createElement('input');
element.addEventListener('keypress', function(e){
if(e.keyCode === 13){
var newElem = document.createElement('div');
newElem.innerHTML = element.value;
newElem.name = element.value;
newElem.innerHTML = '    '.repeat(depth) + '[+]' + element.value;
newElem.className = 'collapse';
var newObj = createProps(newElem);
console.log(parent);
parentObj.children.push(newObj);
temp.appendChild(newElem);
recurseTree(newElem, child, depth,parentObj);
}
})
temp.appendChild(element);
}
}
recurseTree(div, document.body, 0, jsonData);
document.body.appendChild(div);
console.log(jsonData)
div.addEventListener('click', function(event) {
if(event.target.className === "collapse"){
event.target.className = "expand";
}
else{
event.target.className = "collapse";
}
});
});
function generateUUID() {
var d = new Date().getTime();
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = (d + Math.random()*16)%16 | 0;
d = Math.floor(d/16);
return (c=='x' ? r : (r&0x3|0x8)).toString(16);
});
return uuid;
};
function createProps(elem){
var obj = {}
obj.id = generateUUID();
obj.value = elem.name;
obj.children = [];
console.log(obj);
return obj;
}
</script>
我已经解决了这个问题!
function createTreeRecurse(rootP, parent, level){
var childrenn = parent.children;
// console.log("==>",childrenn);
++level;
for(var i=0; i <childrenn.length; i++){
var child = childrenn[i];
//console.log('==>',child);
var elem = document.createElement('div');
elem.innerHTML = '     '.repeat(level)+'[+]'+ childrenn[i].value;
// console.log("==>",elem.innerHTML);
// console.log("==>",elem.id);
// elem.children = [];
rootP.appendChild(elem);
var inp = document.createElement('input');
inp.classList.add("created");
elem.appendChild(inp);
inp.addEventListener('keypress', function(e){
if(e.keyCode == 13){
var newElem = document.createElement('div');
console.log()
// newElem.innerHTML = inp.value;
newElem.name = inp.value;
newElem.value = inp.value;
newElem.innerHTML = '    '.repeat(level) + '[+]' + inp.value;
newElem.className = 'collapse';
var newObj = createObjProps(newElem);
parent.children.push(newObj);
console.log(newObj);
// inp.value = '';
rootP.appendChild(newElem);
}
})
createTreeRecurse(elem,child,level);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.