We need to make a three-level menu for the online store, which will open on click.

  1. How to make a multidimensional array, in which there will be only the names of these items of the 3-level menu? And in html, let's say with the help of the ejs template engine to take data from this multidimensional array, and form a menu. What is of interest is the creation of this array, in which will be the names of the menu, located on the level of nesting.
  2. How to create this menu correctly so that later it would be possible to create a multidimensional menu from this array in a loop?
  3. Please give a simple example of an array with a multi-level menu.

I understand here you need to use an object in which the key will be as a separate menu? Something like this needs to be done.

enter image description here

<% let catalog = [ { id: 1, title: 'Наборы для творчества', parent: 0 }, { id: 2, title: 'Научные игры', parent: 0 }, { id: 3, title: 'Настольные игры', parent: 0 }, { id: 4, title: 'Демонстрационные материалы', parent: 0 }, { id: 5, title: 'Раздаточные материалы', parent: 0 }, { id: 6, title: 'Рабочие тетради', parent: 0 }, { id: 7, title: 'Плакаты и таблицы', parent: 0 }, { id: 8, title: 'Оформление интерьера детского сада', parent: 0 }, { id: 9, title: 'Портфели, портфолио, детские анкеты', parent: 0 }, { id: 10, title: 'Для детской комнаты', parent: 0 }, { id: 11, title: 'Канцтовары', parent: 0 }, { id: 12, title: 'Новогодние товары', parent: 0 }, { id: 13, title: 'Большие наборы для творчества', parent: 1 }, { id: 14, title: 'Наборы для творчества из гипса', parent: 1 }, { id: 15, title: 'Картинки из песка, блесток, пайеток', parent: 1 }, { id: 16, title: 'HANDMADE - декор своими руками', parent: 1 }, { id: 17, title: 'Наборы для творчества на любой вкус', parent: 1 }, { id: 18, title: 'Наборы для слепков', parent: 1 }, { id: 19, title: 'Гравюры', parent: 1 }, { id: 20, title: 'Роспись по холсту', parent: 1 }, { id: 21, title: 'Раскраски и наклейки', parent: 1 }, { id: 22, title: 'Раскраски', parent: 13 }, { id: 23, title: 'Альбомы с наклейками', parent: 13 }, { id: 24, title: 'Наборы наклеек', parent: 13 } ] for(let i = 0; i < catalog.length; i++){ %> <% if(catalog[i]['parent'] == 0) { %> <li><%- catalog[i]['title'] %></li> <% } else {%> <ul> <li><%- catalog[i]['title'] %></li> </ul> <% }} %>

    1 answer 1

    It is not necessary to store it in a multi-level array. Enough one-level, and output with indication of some (conditionally) parent_id . Unlimited nesting is guaranteed :) and a multidimensional array is tons of forEach nested in each other, or recursion, or much more terrible. IMHO

    For example (pseudocode):

     array = [ [0] = [ 'title' = 'Телефоны', 'parent_id' = NULL ], [1] = [ 'title' = 'ASUS', 'parent_id' = 0 ], [2] = [ 'title' = 'Автомобили', 'parent_id' = NULL ], [3] = [ 'title' = 'Nissan', 'parent_id' = 2 ], [4] = [ 'title' = 'Samsung', 'parent_id' = 0 ], [5] = [ 'title' = 'Infiniti', 'parent_id' = 2 ], [6] = [ 'title' = 'Galaxy Note 3', 'parent_id' = 4 ] ]

    Look here. We have two root categories - they are Telephones and Automobiles , their parent_id either NULL , or you can not set them at all, such as they are not nested, root ones. Then ASUS and Samsung are nested in parent_id=0 , that is, in Phones . parent_id matches the index of the item in which it is nested. Nissan and Infiniti are invested in Cars , parent_id=2 . This is the second level. And the third level of nesting is Galaxy Note 3 , it is nested in the Samsung category, which is nested in the root category Phones .

    • Should parent_id be a key or a value? Is there anywhere to look at an example? - word
    • @word added details to his answer. if there are still questions - let's :) - Captain Flint
    • supplemented the answer. Tell me how to wet the menu levels in the parent? - word
    • @word I'm sorry, what does "moisten" mean? - Captain Flint
    • "Captain Flint, you yourself said to use parent_id, which means that the child menu is nested in the parent. So, in my example, you need a second cycle? You can't do it with one cycle - word