從樹形結構創建JSON對象（分層）-更新代碼

Question

我正在嘗試創建一個隨創建節點樹而動態更新的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 = '&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);




    }

}