Recursive call - javascript recursive array recursion problem

Question

Now there is a demand. It needs to be assembled into a tree node, that is, the parent-child node, based on the data requested by the server. The data structure after the server request is as shown below. Topology is an object, and the key under the object is a parent, value is the child array.

For example, 1 in the picture above has a child which is an array ["2"], and the child with value 2 has 4 children, that is, ["29", "39", "38", "37 "]

Finally, the following data structure needs to be generated, that is, the key is the string of parent, and because there are multiple children, it is an array

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

Thank you again.

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)}));

Result:

Answer 2

The data you want to generate should be in this form:

{
  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 Thank you.
Yes, I need your data structure. I didn’t make it clear in the problem description, sorry.
Now this recursive data needs to be stuffed into the treenode of antd, that is, each parent needs to be composed of children into a Treenode, such as this (for example, the children nodes are not all written out).

        <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>

This is an official document. The following code is my implementation (refer to the asynchronous data loading code in the official document), but an error is reported.
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)});