Recursive call - javascript recursive array recursion problem
阿神
阿神 2017-06-26 10:50:17
0
3
935

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.

阿神
阿神

闭关修行中......

reply all(3)
为情所困
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:

typecho

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
}
学霸

@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)});
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template