Как правильно распределить меню и его подпункты выводом из базы?

Question

[historydev]

Добрый вечер.Скажите пожалуйста,как мне распределить меню по его подпунктам допустим:
id 2 - Свинина (Пункт)
parent_id 2 - Живойвес (Подпункт)
parent_id 3 - Мелковес (Подпункт 3-го уровня)

Answer 1

[Пашенька]

id 2 - Свинина (Пункт)
parent_id 2 - Живойвес (Подпункт)
parent_id 3 - Мелковес (Подпункт 3-го уровня)

Не уверен, что это правильно. Вернее уверен, что ты неправильно это понимаешь: parent_id 2 это подпункт для меню итема с id 2, а не второго уровня(в данном случае он второго уровня, но это просто совпадение). parent_id 3 это подпункт для меню итема с id 3, а не третьего уровня. У тебя же там не будет меню вложенностью в 16 пунктов, верно?)

Напиши ответ из базы, джейсон или что там будет, тогда накидаю вывод разметки.

Update. Держи:

let ul = '<ul>';

for (let i = 0; i < arr.length; i++) {
  let item = arr[i];
  ul += '<li>' + item.title + '</li>';
  
  for (let j = 0; j < item.children.length; j++) {
    let child = item.children[j];
    if (j === 0) {
      ul += '<ul>';
    }
    ul += '<li>' + child.title + '</li>';
    
    
    if (child.children) {
      for (let k = 0; k < child.children.length; k++) {
        let child2 = child.children[k];
        if (k === 0) {
          ul += '<ul>';
        }
        ul += '<li>' + child2.title + '</li>';
        
        
        if (child2.children) {
          for (let n = 0; n < child2.children.length; n++) {
            let child3 = child2.children[n];
            if (n === 0) {
              ul += '<ul>';
            }
            ul += '<li>' + child3.title + '</li>';

            if (n === child2.children.length - 1) {
              ul += '</ul>';
            }
          }
        }
      

        if (k === child.children.length - 1) {
          ul += '</ul>';
        }
      }
    }
       
    
    if (j === item.children.length - 1) {
      ul += '</ul>';
    }
  }
  
}
ul += '</ul>';
document.body.innerHTML = ul;

Проверяй уже сам, всё ли правильно.

Comments

[historydev]

Вот:

pool.query('SELECT * FROM menu', (error,results,fields) => {
  results.map(r => r)
})

[Пашенька]

Владимир, я имею ввиду дай сам джейсон - сам ответ - данные

[historydev]

[Пашенька]

Владимир, текстом) Нихера се... 1203. Я правильно задачу понял?

[historydev]

like-a-boss, да,парсера нанимал

[historydev]

like-a-boss, Вот смотри,этот код делает дело

let viewmenu

		pool.query('SELECT * FROM menu', (err, result) => {
			  if(err) {
			    console.error(err)
			  }

			  const index = result.reduce((acc, row) => ({...acc, [row.id]: row}), {})
					var menu = []
					for(const row of result) {
					    if(row.parent_id === 0) {
					      menu.push(row)
					      continue
					    }
					    const parent = index[row.parent_id]
					    if(!parent) {
					      console.warn(`Undefined parent with id ${row.parent_id}`)
					      continue
					    }
					    if(!parent.children) {
					      parent.children = []
					    }
					    parent.children.push(row)
					    
			  }

			  viewmenu = menu

		})

		const send = ms => {
			return new Promise(r => setTimeout(() => r(), ms))
		}

		send(200).then(() => res.send(viewmenu))

[historydev]

like-a-boss,

[historydev]

like-a-boss, но есть 2 ньюанса
1. Я не понимаю как это работает
2. Следствие пункта 1,я не понимаю как мне принять и распределить пункты на клиенте

[historydev]

like-a-boss, можешь пожалуйста пример набросать,я что-то не допёр..

[Пашенька]

Владимир, скинь нормально текстом джейсон. В консоли по этому ответу ПКМ -> store as global variable; copy(temp1); вставить сюда.

[historydev]

like-a-boss, чаво?)Как мне вытащить ответ в файл?

[Пашенька]

Владимир, да не в файл)


Потом: copy(temp1); вставить сюда.

[historydev]

like-a-boss, ща попробую

[historydev]

[Пашенька]

Владимир, Писать store as global variable не нужно) Вот у тебя было copy(temp1), теперь у тебя ответ в буфере обмена -> Ctrl+V сюда)

[historydev]

не дает,более 10к символов,скинь телегу

[Пашенька]

Владимир, в телегу не хожу. Кидай codepen/pastebin/whatever

[historydev]

like-a-boss, https://codepen.io/historydev/pen/QWWRvqE извини что так долго,сначала пароль восстанавливал, потом фидбэк собрал

[Пашенька]

Владимир, обновил.

[historydev]

function makeMenuLevel(arr) {
				let ul = '<ul>';

				for (let i = 0; i < arr.length; i++) {
				  let item = arr[i];
				  ul += '<li>' + item.title + '</li>';
				  
				  for (let j = 0; j < item.children.length; j++) {
				    let child = item.children[j];
				    if (j === 0) {
				      ul += '<ul>';
				    }
				    ul += '<li>' + child.title + '</li>';
				    
				    
				    if (child.children) {
				      for (let k = 0; k < child.children.length; k++) {
				        let child2 = child.children[k];
				        if (k === 0) {
				          ul += '<ul>';
				        }
				        ul += '<li>' + child2.title + '</li>';
				        
				        
				        if (child2.children) {
				          for (let n = 0; n < child2.children.length; n++) {
				            let child3 = child2.children[n];
				            if (n === 0) {
				              ul += '<ul>';
				            }
				            ul += '<li>' + child3.title + '</li>';

				            if (n === child2.children.length - 1) {
				              ul += '</ul>';
				            }
				          }
				        }
				      

				        if (k === child.children.length - 1) {
				          ul += '</ul>';
				        }
				      }
				    }
				       
				    
				    if (j === item.children.length - 1) {
				      ul += '</ul>';
				    }
				  }
				  
				}
				ul += '</ul>';

				console.log(ul)

				document.body.innerHTML = ul;
			}
			

          	const menu = fetchTodos('/menu')
		       const viewMenu = makeMenuLevel(menu)

			async function fetchTodos(url) {
				this.url = url
				this.options = {
					method: 'POST'
				}
				console.log('Fetch todo started...')
				const response = await fetch(this.url,this.options)
				const data = await response.json()

				console.log(data)

				return data
			}

[Пашенька]

Владимир, const viewMenu = makeMenuLevel(menu) // не надо присваивать переменной. Просто вызов
Ты недостаточно целеустремлённый)

[historydev]

like-a-boss, да я бы за часов 5-7 разгрёб бы это все сам,дело в том что пишу для проекта и не хочется говнокодить.Поэтому я предпочёл просьбу к более продвинутым в данных вопросах людям.Спасибо

[historydev]

Да я уже и return пробовал и просто вызвать,не работает нифига)

[Пашенька]

Владимир, проверяй что возвращает fetchTodos, нужен такой же ответ, как на кодпене arr

[Пашенька]

Владимир, потом смотри, что получает функция makeMenuLevel. Учись дебажить. Это основной скилл.

[historydev]

like-a-boss, я тебе скинул то,что я из fetch в консоль кидаю.посмотри код,там внизу функции consol.log(data)

[Пашенька]

Владимир, это я видел, но что приходит в функцию makeMenuLevel? Выведи в ней аргумент сначала

[Пашенька]

Владимир, Очевидно что там дело в асинхронности. Нужен await для const menu = await fetchTodos('/menu')

[historydev]

like-a-boss, да,ты был прав,спасибо

[historydev]

like-a-boss, а можешь еще помочь привести это к такому виду?Я новый вопрос создам,извини если нагло :)

[Пашенька]

Владимир, Ну это уже сам, у меня своих задач по горло) Тут же проще простого: добавь классы li'шкам ul'кам и застиль, как надо. Это вёрстка. Это скучно.

[historydev]

like-a-boss, дааа,прикинь,я раньше считал верстку очень веселой)А теперь братся за этот калл не хочу,влюбился в бэк по уши.Я так и сделал,вот только загвоздка с одной штукой,мне нужно 1 следущий за фокусным элементом отображать.Вот это выводит все

.list:hover ~.lvl2 {
			display: block;
		}

Пробовал докинуть :nth-child(1),но что-то пошло не так)

[Пашенька]

Владимир, Сложно ответить не видя, что ты скрыл и какие классы куда дал.

[historydev]

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0,width=device-width,height=device-height,user-scalable=no">
	<title>Menu</title>
	<style type="text/css">
		body {
			color: #555;
		}
		.list {
			background: #111;
		}
		.home {
			display: none;
		}
		.lvl2 {
			display: none;
		}

		.list:hover ~.lvl2 {
			display: block;
		}
	</style>
</head>
<body>

	<nav></nav>


	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

	<script type="text/javascript">



			async function makeMenuLevel() {

				const arr = await fetchTodos('/menu')

				let ul = '<ul>';

				for (let i = 0; i < arr.length; i++) {
				  let item = arr[i];
				  ul += '<li class="list">' + item.title + '</li>';
				  
				  for (let j = 0; j < item.children.length; j++) {
				    let child = item.children[j];
				    if (j === 0) {
				      ul += '<ul class="lvl2">';
				    }
				    ul += '<li class="list">' + child.title + '</li>';
				    
				    
				    if (child.children) {
				      for (let k = 0; k < child.children.length; k++) {
				        let child2 = child.children[k];
				        if (k === 0) {
				          ul += '<ul class="home">';
				        }
				        ul += '<li>' + child2.title + '</li>';
				        
				        
				        if (child2.children) {
				          for (let n = 0; n < child2.children.length; n++) {
				            let child3 = child2.children[n];
				            if (n === 0) {
				              ul += '<ul>';
				            }
				            ul += '<li>' + child3.title + '</li>';

				            if (n === child2.children.length - 1) {
				              ul += '</ul>';
				            }
				          }
				        }
				      

				        if (k === child.children.length - 1) {
				          ul += '</ul>';
				        }
				      }
				    }
				       
				    
				    if (j === item.children.length - 1) {
				      ul += '</ul>';
				    }
				  }
				  
				}
				ul += '</ul>';

				console.log(ul)

				document.body.innerHTML = ul;
			}
		    
		    makeMenuLevel()

			async function fetchTodos(url) {
				this.url = url
				this.options = {
					method: 'POST'
				}
				console.log('Fetch todo started...')
				const response = await fetch(this.url,this.options)
				const data = await response.json()

				console.log(data)

				return data
			}

	</script>
</body>
</html>

[Пашенька]

Владимир, + надо использовать, а не тильду.

[historydev]

like-a-boss, да-да,уже вчера разобрался,спасибки