Appel récursif - problème de récursion de tableau récursif javascript

Question

Maintenant, il y a une exigence. Il doit être assemblé dans un nœud d'arborescence en fonction des données demandées par le serveur, qui est le nœud parent-enfant. La structure des données après la demande du serveur est la suivante : la topologie est un objet. et la clé sous l'objet est une valeur parent qui est le tableau enfant.

Par exemple, 1 dans l'image ci-dessus a un enfant qui est un tableau ["2"], et l'enfant de valeur 2 a 4 enfants, c'est-à-dire ["29", "39", "38", "37 "]

Enfin, la structure de données suivante doit être générée, c'est-à-dire que la clé est la chaîne du parent, et comme il y a plusieurs enfants, c'est un tableau

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

Merci encore d'avance.

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

Résultat :

Answer 2

Les données que vous souhaitez générer doivent être sous cette forme :

{
  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 Merci.
Oui, j'ai besoin de votre structure de données. Je ne l'ai pas précisé dans la description du problème, désolé.
Maintenant, ces données récursives doivent être insérées dans le treenode de antd, c'est-à-dire que chaque parent doit être composé d'enfants dans un Treenode, comme celui-ci (par exemple, les nœuds enfants ne sont pas tous écrits).

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

Ceci est un document officiel. Le code suivant est mon implémentation (reportez-vous au code de chargement de données asynchrone dans le document officiel), mais une erreur est signalée.
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)});