Блог

Я использую шаблон, который отображает меню с предопределенной структурой. У меня есть база данных с некоторыми меню, и я уже извлекаю их. Проблема в том, что мне нужно каким-то образом создать логику для построения предопределенной структуры с помощью меню, которые я получаю из базы данных. Вот пример того, что я пытаюсь объяснить:

 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 ключ всегда является ключом, который потенциально имеет дочерние элементы, проверьте его длину и добавьте вложенный цикл, если он содержит более 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
              }
          }
      }
}