时间戳

首页 > 解决方案 > 基于数据库数据构建嵌套数组

javascript - 基于数据库数据构建嵌套数组

问题描述

我正在使用一个模板来呈现具有预定义结构的菜单。我有一个带有一些菜单的数据库，我已经在检索它们。问题是我需要以某种方式使用从数据库中获取的菜单构建预定义结构的逻辑。这是我试图解释的一个例子：

export const MainNav = [
 {
   icon: "pe-7s-rocket",
   name: "Dashboards",
   content: [
     {
       name: "Analytics",
       url: "#/dashboards/analytics",
     },
     {
      name: "Commerce",
      content: [
        {
          name: "Blabla",
          url: "#/dashboards/commerce",
        },
        {
          name: "Sales",
          url: "#/dashboards/sales",
        },
      ]
     },
   ],
  {
    name: "Minimal",
    content: [
      {
        name: "Variation 1",
        url: "#/dashboards/minimal-dashboard-1",
      },
      {
        name: "Variation 2",
        url: "#/dashboards/minimal-dashboard-2",
      },
    ],
  },
  {
    name: "CRM",
    url: "#/dashboards/crm",
  },
];

基本上它是一个带有嵌套数组/对象的对象数组。

我真的需要一些指南，我想我需要使用递归，但我不知道如何。基本上，子菜单必须进入其父对象的 content 属性。

标签： javascriptreactjs

解决方案

由于content密钥始终是可能有子项的密钥，因此请检查它的长度，如果它包含超过 1 个子项，则添加一个嵌套循环。

for (let i = 0; i < MainNav.length; i++) {
     let parent = MainNav[i];
      // create parent nav element here, accessing it's properties i.e. parent.name
      if (parent.content) { //so you don't get reference errors
          if (parent.content.length > 1) {
              for (let v = 0; v < parent.content.length; v++) {
                  let nestedChild = parent.content[v];
                  // append child nav elements here
              }
          }
      }
}

推荐阅读