遞歸呼叫 - javascript遞歸數組遞歸問題

Question

現在有個需求，需要根據服務端請求的數據，組裝成一個樹節點，也就是parent-child節點，服務端請求後的數據結構如下圖，topology是一個object，object下面的key是一個parent，value是child數組。

#例如上圖的1有一個child是一個陣列["2"]，這個value為2的child又有4個child，也就是["29","39","38","37 "]

最後需要產生以下資料結構，即key是parent的string，child因為有多個，所以是一個陣列

const data = ["1":["2":["29":["24":["27":["26"]]],"39":["47"],"38":["43":["45"]],"37":["42":["46"]]]]]

又先謝過了。

Answer 1

var topology = [ ... ];

function rebuildTopo(index) {
    var topo = topology[index];
    var check = false;
    
    if(!topo) {
        return null;
    } else if(topo instanceof Array) {
        var obj = {};
        
        for(var j in topo) {
            var t = topo[j];
            obj[t] = rebuildTopo(t);
            
            if(!!obj[t])
                check = true;
        }
        
        if(check)
            return obj;
        else
            return Object.keys(obj);
    }
}

console.log(JSON.stringify({1: rebuildTopo(1)}));

結果：

Answer 2

你要產生的資料應該是這種形式吧：

{
  key: '1',
  children: [{
    key: '2',
    children: [...]
  }]
}

function appendChildren (data, key = '1') {
  const node = { key }
  if (Array.isArray(data[key])) {
    node.children = data[key].map(child => appendChildren(data, child))
  }
  return node
}

Answer 3

@cool_zjy 多謝。
是的，需要你這種資料結構，問題描述裡沒有寫清楚，抱歉。
現在這個遞歸後的數據，需要塞入到antd的treenode裡面，也就是每個parent需要由child組成Treenode，例如這樣（舉個例子，children節點沒有全部寫出來）。

        <TreeNode title="1" key="1">
          <TreeNode title="2" key="2">
            <TreeNode title="29" key="29">
                <TreeNode title="24" key="24">
                    <TreeNode title="27" key="27">
                        <TreeNode title="26" key="26" />
                    </TreeNode>
                </TreeNode>
            </TreeNode>
            <TreeNode title="39" key="39">
                <TreeNode title="47" key="47" />
            </TreeNode>
            <TreeNode title="38" key="38">
                <TreeNode title="43" key="43">
                    <TreeNode title="45" key="45" />
                </TreeNode>
            </TreeNode>
            <TreeNode title="37" key="37">
                <TreeNode title="42" key="42">
                    <TreeNode title="46" key="46" />
                </TreeNode>
            </TreeNode>
          </TreeNode>
        </TreeNode>

這個是官方文檔，以下程式碼是我的實作（參考了官方文檔裡的非同步資料載入部分的程式碼），不過報錯了。
https://ant.design/components...

                const appendChildren = (data, key = '1') => {
                    const node = { key }
                    if (Array.isArray(data[key])) {
                        node.children = data[key].map(child => appendChildren(data, child))
                    }
                    return node
                }
                const firstKey = Object.keys(topology)[0];   //这里的topology是服务端返回的数据
                const result = [appendChildren(topology,firstKey)];
                const loop = data => data.map((item) => {
                    if (item.children) {
                        return <TreeNode title={item.key} key={item.key}>{loop(item.children)}</TreeNode>;
                }
                    return <TreeNode title={item.key} key={item.key} />;
                });
                this.setState({treeData:loop(result)});