使用遞歸 Function 創建 JS Object

Question

我有一個像這樣的 html 塊；

<div id="a">
   <div id=b parentid=a> 
        <div id=d parentid=b> 
        </div>
   </div>
   <div id=c parentid=a> 
       <div id=e parentid=c> 
           <div id=f parentid=e> 
           </div>
       </div>
   </div>
</div>

我想將此動態 html 塊轉換為 javascript object。 我想最好的方法是遞歸 function。 我想掃描上面的html結構，得到下面的output我想要的結果；

items : 
[
{
    id : "a",
    parentid : null,
    items : 
        [
        {
            id : "b",
            parentid : "a",
            items : 
                [
                {
                    id : "d",
                    parentid : "b",
                }
                ]
        },
        {
            id : "c",
            parentid : "a",
            items : 
                [
                {
                    id : "e",
                    parentid : "c",
                    items : 
                        [
                        {
                            id : "f",
                            parentid : "e",
                        }
                        ]
                }
                ]
        }
        ]
}
]

我正在嘗試這種方式，但我無法得到正確的結果。 addComponent() 是我定義的 function。

function getSubs(a) {
    var generalObject = new Component();
    var gElement = [];
    gElement = $("[parentid=" + a + "]");
    if (gElement.length > 0) {      
        for (var i = 0; i < gElement.length; i++) {
            var obj = new Component();
            elementId = gElement[i].getAttribute('id');
            dataType = gElement[i].getAttribute('data-type');
            obj.type = dataType;
            obj.key = elementId;
            generalObject.addComponent(obj);
            getSubs(elementId);
        }
        
    }
    
}

你能幫助我嗎？

Answer 1

您可以采用簡化的線性方法並獲取所有節點，將 object 作為父節點的參考。

為每個節點分配一個新的 object 給父節點的子節點，並將節點保存到引用。

 const tree = [], references = { undefined: { children: tree } }; for (const { id, dataset: { parentid } } of document.getElementsByTagName('div')) { references[parentid].children.push(references[id] = { id, parentid, children: [] }); } console.log(tree);

 .as-console-wrapper { max-height: 100%;important: top; 0; }

 <div id="a"> <div id="b" data-parentid="a"> <div id="d" data-parentid="b"> </div> </div> <div id="c" data-parentid="a"> <div id="e" data-parentid="c"> <div id="f" data-parentid="e"> </div> </div> </div> </div>