使用JavaScript递归创建树

Question

我想使用递归函数创建树。 该函数的输入是一个节点，我想使用该递归函数将其子代添加到该节点。

以下代码将更好地解释我的问题：

 function getUpstreamChildrenRecusrively(node) { var receiverId = localStorage.getItem("ReceiverId"); //API call to get the children node axios({ method: 'get', url: window.location.origin+"/api/rwa/coverageView/getUpstreamChildren?id="+node.elementId, headers: { "ReceiverId":receiverId } }) .then(response => { localStorage.setItem("ReceiverId",response.headers["receiverid"]); var data = response.data; for(var i = 0; i < data.length; i++) { var obj = data[i]; var result = {}; result.text = obj.print; result.elementId = obj.id; result.elementText = obj.text; result.expanded = true; result.visible = true; result.icon = window.location.origin+"/api"+obj.image; getUpstreamChildrenRecusrively(result); node.nodes = []; //nodes property will contain children node.nodes.push(result); console.log("Tree so far:"+JSON.stringify(node)); } }) .catch(error => { }) } 

对于每个递归调用，该节点的值都是一个单独的节点，在节点属性中具有单个子节点。 我希望最终将节点与所有子节点一起成长。

我在此代码中缺少什么？

先感谢您！

Answer 1

您对递归的工作方式的理解是有缺陷的，我并不是在试图粗鲁，只是试图帮助您了解您需要进一步研究该主题。

1. 首先，您不会从函数中返回任何内容
2. 递归调用函数后，您还要检查node的值（该函数执行异步调用，作用域为当前函数调用）。
3. 您正在进行递归api调用，但未检查该函数何时停止执行。 这意味着它将一直运行到您的api调用失败为止。

  function getUpstreamChildrenRecusrively(node) { var receiverId = localStorage.getItem("ReceiverId"); //Api call to get the children node return axios({ method: "get", url: window.location.origin + "/api/rwa/coverageView/getUpstreamChildren?id=" + node.elementId, headers: { ReceiverId: receiverId } }) .then(response => { localStorage.setItem("ReceiverId", response.headers["receiverid"]); var data = response.data; for (var i = 0; i < data.length; i++) { var obj = data[i]; var result = {}; result.text = obj.print; result.elementId = obj.id; result.elementText = obj.text; result.expanded = true; result.visible = true; result.icon = window.location.origin + "/api" + obj.image; node.nodes = getUpstreamChildrenRecusrively(result); //nodes property will contain children console.log("Tree so far:" + JSON.stringify(node)); return node; } }) .catch(error => { /* I am using ES6 here, you can use something equavelant to check if node has a value */ if (Object.keys(node).length > 0) { return node; } else { /* obviously you need other error handling logic here too */ } }); } 

Answer 2

看起来您希望getUpstreamChildrenRecusrively能同步工作。 详细了解javascript async / await和Promises。

这可能是应该如何工作的

async function getUpstreamChildrenRecusrively(node) {
  const receiverId = localStorage.getItem("ReceiverId")

  const response = await axios({
    method: 'get',
    url: window.location.origin+"/api/rwa/coverageView/getUpstreamChildren?id="+node.elementId,
    headers: {
      ReceiverId: receiverId
    }
  })

  localStorage.setItem("ReceiverId",response.headers["receiverid"])
  const data = response.data

  node.nodes = node.nodes || []

  for(let i = 0; i < data.length; i++) {
    const obj = data[i]
    const result = {}
    result.text = obj.print
    result.elementId =  obj.id
    result.elementText = obj.text
    result.expanded = true
    result.visible = true 
    result.icon = window.location.origin + "/api" + obj.image
    node.nodes.push(result)
    await getUpstreamChildrenRecusrively(result)               
  }                                     
}

getUpstreamChildrenRecusrively(initialNode).then(() => {
  console.log('result node', initialNode)
})