Question

我正在尝试创建一个JSON对象，该对象在创建节点树时动态更新。节点树将接受输入并将其附加到树。并且同时使用以下值更新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 = '&nbsp&nbsp&nbsp&nbsp'.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>

Answer 1

我已经解决了这个问题！

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 = '&nbsp&nbsp&nbsp&nbsp&nbsp'.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 = '&nbsp&nbsp&nbsp&nbsp'.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);




    }

}

从树结构 - 已更新的代码创建JSON对象（分层）

1 个答案: