Javascript递归函数异步等待生成树

我正在尝试生成html树的这种结构（例如，我使用了一家服装店）

getSubCategories（“Kids Cloth”）没有给我想要的html。（我从代码中删除了生成html的tryes，而我保留了基本函数）

我试图将build\u category\u tree\u递归调用的结果连接起来，但结果都搞砸了。 我还尝试构建一个节点类，并在每个调用中添加一个子类，但也没有成功。 我在这里遗漏了一些东西，可能与递归理解有关，可能与异步等待理解有关，可能两者都有。 我将非常感谢你的帮助！

---

谢谢

我首先将数据转换为单个对象。从那里我们可以做一个单独的步骤，将其格式化为HTML

此解决方案涉及到相互递归，从而简化了许多问题。我们的主要函数，

getStructure

调用您的

getSubCategories

函数，但也调用一个简单的

getallsubcates

函数。该函数依次调用相关子对象上的

getStructure

下面是一个实现（使用虚拟版本的

getSubCategories

）

//-----------------------------------------------------------------------------------
//主对象获取代码
//-----------------------------------------------------------------------------------
常量getAllSubCats=async（类别）=>
承诺。所有（类别。地图）(
（{type，title}）=>type='subcat'？getStructure（title）：{title}
))
const getStructure=async（title）=>{
const children=等待获取子类别（标题）
const subCategories=等待GetAllSubcates（子类）
返回{标题，子类别}
}
//-----------------------------------------------------------------------------------
//HTML格式代码
//-----------------------------------------------------------------------------------
常量sp=（缩进）=>''。重复（4*缩进）
常量formatTree=（{title=''，子类别=[]}，缩进）=>
子类别.长度
? `${sp（缩进）}
${title}
${sp（缩进+1）}

${subCategories.map（subcat=>formatTree（subcat，indent+2））.join（'\n'）}
${sp（缩进+1）}
${sp（缩进）}
`
：`${sp（缩进）}
${title}
`
const formatHtml=（tree）=>`\n${formatTree（tree，1）}\n`
//-----------------------------------------------------------------------------------
//演示代码
//-----------------------------------------------------------------------------------
getStructure（“儿童服装”）
.然后（logObj）
.then（格式HTML）
.然后（console.log）

。作为控制台包装{最小高度：100%！重要；顶部：0}

//-----------------------------------------------------------------------------------
//用于演示的伪实现
//-----------------------------------------------------------------------------------
const getSubCategories=（（cats）=>async（name）=>
Promise.resolve（猫的名字？猫[名字]：[]））
)({
“儿童服装”：[{title:'Boys'，type:'subcat'}，{title:'Girls'，type:'subcat'}]，
男孩：[]，
女孩：[{title:'Dresses'，type:'subcat'}，{title:'Shirts'，type:'subcat'}]，
礼服：[{title:'Maxi-rides'，type:'subcat'}，{title:'Mini-rides'，type:'subcat'}]，
'Maxi连衣裙'：[{title:'dress1'，type:'page'}，{title:'dress2'，type:'page'}]，
'迷你裙'：[{标题：'裙3'，类型：'页'}]，
衬衫：[{title:'shirt 1'，type:'page'}]，
})
//-----------------------------------------------------------------------------------
//演示的助手函数
//-----------------------------------------------------------------------------------
const logObj=（obj）=>console.log（JSON.stringify（obj，null，4））| | obj

我首先将数据转换为单个对象。从那里我们可以做一个单独的步骤，将其格式化为HTML

此解决方案涉及到相互递归，从而简化了许多问题。我们的主要函数，

getStructure

调用您的

getSubCategories

函数，但也调用一个简单的

getallsubcates

函数。该函数依次调用相关子对象上的

getStructure

下面是一个实现（使用虚拟版本的

getSubCategories

）

//-----------------------------------------------------------------------------------
//主对象获取代码
//-----------------------------------------------------------------------------------
常量getAllSubCats=async（类别）=>
承诺。所有（类别。地图）(
（{type，title}）=>type='subcat'？getStructure（title）：{title}
))
const getStructure=async（title）=>{
const children=等待获取子类别（标题）
const subCategories=等待GetAllSubcates（子类）
返回{标题，子类别}
}
//-----------------------------------------------------------------------------------
//HTML格式代码
//-----------------------------------------------------------------------------------
常量sp=（缩进）=>''。重复（4*缩进）
常量formatTree=（{title=''，子类别=[]}，缩进）=>
子类别.长度
? `${sp（缩进）}
${title}
${sp（缩进+1）}

${subCategories.map（subcat=>formatTree（subcat，indent+2））.join（'\n'）}
${sp（缩进+1）}
${sp（缩进）}
`
：`${sp（缩进）}
${title}
`
const formatHtml=（tree）=>`\n${formatTree（tree，1）}\n`
//-----------------------------------------------------------------------------------
//演示代码
//-----------------------------------------------------------------------------------
getStructure（“儿童服装”）
.然后（logObj）
.then（格式HTML）
.然后（console.log）

。作为控制台包装{最小高度：100%！重要；顶部：0}

//----------------------------------
<ul id="myUL">
    <li><span class="caret">Kids cloths</span>
        <ul class="nested">
            <li>Boys</li>
            <li>Girls</li>
            <li><span class="caret">Dresses</span>
                <ul class="nested">
                    <li><span class="caret">Maxi dresses</span>
                        <ul class="nested">
                            <li>dress 1</li>
                            <li>dress 2</li>
                        </ul>
                    </li>
                    <li><span class="caret">Mini dresses</span>
                        <ul class="nested">
                            <li>dress 3</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><span class="caret">Shirts</span>
                <ul class="nested">
                    <li>shirt 1</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

function getSubCategories(CategoryName){
    let fetchPromise = fetch(queryTextForAPI).then((response) => {
        return response.json();
      });

      return fetchPromise;
}

async function build_category_tree_recursive(root_category){
  let subcategories =await getSubCategories(root_category)
  let data=subcategories.query.categorymembers;
  if(data.length>0){
      data.forEach(element=>{
          if(element.type==="subcat"){//this is a category
              (async () => {
                let son_node=await build_category_tree_recursive(element.title);
                //I'm not sure what to do here?
                //How to generate a html code and concatenate it to "myUL"? 
              })();

          }
          else if(element.type==="page"){//it's a product
              return element.title;
          }
      });
  }
  else{
      //return the full htl that was generated?
  }
}