Javascript JS递归映射对象名称

我有一个对象数组，深度未定义。 现在，我希望名称输出如下：

Top Level
Top Level > Sub 1
Top Level > Sub 1 > Sub 1-2
Top Level > Sub 2

然而，我总是只得到最低的元素。我不知道还能做些什么来正确格式化这些名字

        parseCategories(categories, stackCounter = 0) {
          categories.forEach(c => {
            this.res[stackCounter] = { name: c.attributes.name, id: c.id };
            if(c.children.length >= 1) {
              this.parseCategories(c.children, stackCounter + 1);
            }
          });
          return this.res;
        }

我的对象如下所示：

{
   "data":[
      {
         "type":"categories",
         "id":"1",
         "attributes":{
            "name":"Top Level"
         },
         "children":[
            {
               "type":"categories",
               "id":"2",
               "attributes":{
                  "name":"Sub 1"
               },
               "children":[
                  {
                     "type":"categories",
                     "id":"4",
                     "attributes":{
                        "name":"Sub 1-2"
                     },
                     "children":[

                     ]
                  }
               ]
            },
            {
               "type":"categories",
               "id":"3",
               "attributes":{
                  "name":"Sub 2"
               },
               "children":[

               ]
            }
         ]
      }
   ]
}

看看这个街区

categories.forEach(c => {
  this.res[stackCounter] = { name: c.attributes.name, id: c.id };
});

您可以看到，

res[stackCounter]

总是被

类别的最后一个元素覆盖。要解决这个问题，
res[stackCounter]
也应该是一个数组

parseCategories(categories, stackCounter = 0) {
  // init res[stackCounter]
  if (this.res[stackCounter]) {
    this.res[stackCounter] = [];
  }
  categories.forEach(c => {
    this.res[stackCounter].push({ name: c.attributes.name, id: c.id }); // push to res[stackCounter]
    if(c.children.length >= 1) {
      this.parseCategories(c.children, stackCounter + 1);
    }
  });
  return this.res;
}

看看这个街区

categories.forEach(c => {
  this.res[stackCounter] = { name: c.attributes.name, id: c.id };
});

您可以看到，
res[stackCounter]
总是被
类别的最后一个元素覆盖。要解决这个问题，
res[stackCounter]
也应该是一个数组

parseCategories(categories, stackCounter = 0) {
  // init res[stackCounter]
  if (this.res[stackCounter]) {
    this.res[stackCounter] = [];
  }
  categories.forEach(c => {
    this.res[stackCounter].push({ name: c.attributes.name, id: c.id }); // push to res[stackCounter]
    if(c.children.length >= 1) {
      this.parseCategories(c.children, stackCounter + 1);
    }
  });
  return this.res;
}

生成器函数通常会简化这种遍历。在这里，我们可以编写一个非常简单的生成器，然后将其封装在一个函数中，该函数从该生成器创建一个数组：


const getpath=function*（xs，ps=[]）{
for（设x/xs）{
yield[…ps，x.attributes.name].join（“>”）
yield*getpath（x.children，[…ps，x.attributes.name]）
}
}
常量类别名称=（类别）=>
[…获取路径（categories.data）]
const categories={data:[{type:“categories”，id:“1”，attributes:{name:“Top Level”}，children:[{type:“categories”，id:“2”，attributes:{name:“Sub 1”}，children:[]}，{type:“categories”，id:“3”，attributes:{name:“Sub 2”}，children[]}；
控制台日志(
类别名称（类别）
)
生成器函数通常会简化此类遍历。在这里，我们可以编写一个非常简单的生成器，然后将其封装在一个函数中，该函数从该生成器创建一个数组：


const getpath=function*（xs，ps=[]）{
for（设x/xs）{
yield[…ps，x.attributes.name].join（“>”）
yield*getpath（x.children，[…ps，x.attributes.name]）
}
}
常量类别名称=（类别）=>
[…获取路径（categories.data）]
const categories={data:[{type:“categories”，id:“1”，attributes:{name:“Top Level”}，children:[{type:“categories”，id:“2”，attributes:{name:“Sub 1”}，children:[]}，{type:“categories”，id:“3”，attributes:{name:“Sub 2”}，children[]}；
控制台日志(
类别名称（类别）
)
您可能需要查看以下内容：，以及：。javascript还有一个Map（）函数和一个flatMap（）函数可以帮助您。我不需要检查道具是否可用，我知道它们是可用的，我搜索一个解决方案，将上层分类名称与子名称连接起来。您可能希望查看以下内容：，而以下内容：。javascript还有一个Map（）函数和一个flatMap（）函数可以帮助您。我不需要检查道具是否可用，我知道它们是可用的，我会搜索一个解决方案来将上层分类名称与子名称连接起来，这会产生：
[[[{“name”：“Top Level”，“id”：“1”}]，{“name”：“Sub 1”，“id”：“2”}，{“name”：“Sub 2”，“id”：“3”}]，{“name”：“Sub 1-2”，“id”：“4”}]
我想连接所有父类别名称。您的问题与树数据结构有关。具体来说，“遍历”树。您应该查找并学习它，因为它是最重要和最流行的数据结构之一。这会产生：
[[{“name”：“Top Level”，“id”：“1”}]，{“name”：“Sub 1”，“id”：“2”}，{“name”：“Sub 2”，“id”：“3”}]，{“name”：“Sub 1-2”，“id”：“4”}]]
我想连接所有父类别名称。您的问题与树数据结构有关。具体来说，“遍历”“那棵树。您应该寻找并学习它，因为它是最重要和最流行的数据结构之一。谢谢您的代码。我刚刚读到了“遍历树”，可能需要开发一些示例。我不太明白你的代码，但我现在会习惯的。@Phil795:添加了一个解释。希望现在能更容易理解。谢谢你的代码。我刚刚读到了“遍历树”，可能需要开发一些示例。我不太明白你的代码，但我现在会习惯的。@Phil795:添加了一个解释。希望现在更容易理解。