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

Question

[historydev]

Доброе утро.Помогите пожалуйста.Уже несколько часов грею голову,не понимаю как вывести меню.
У меня есть вот такой скрипт на данный момент,он находит все совпадающие подпункты и выводит их массивами.В последствии мне нужно выводить текст под этими id
parent_id - id подпунктов
id - id пунктов
title - текст пунктов

connection.query("SELECT * FROM menu", function(err,res){
		const menu = res.map(list => list)

		for(i=0; i<menu.length; i++) {
			connection.query("SELECT * FROM menu WHERE parent_id = '"+menu[i].id+"'", function(err,res){
				
			})
		}

	})

Answer 1

[Дмитрий Беляев]

connection.query('SELECT * FROM menu', (err, result) => {
  if(err) {
    console.error(err);
    return;
  }
  const index = result.reduce((acc, row) => ({...acc, [row.id]: row}), {});
  const 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);
  }
  console.log(menu);
});

Comments

[historydev]

Спасибо,а отсюда мне вытаскивать как их?Обращаться .title?

[historydev]

Как мне вывести их по очереди?Я что-то запутался,можно пример как вывести все что там есть в нужном порядке.а то я что-то не тук-тук..

for(i=0; i<menu.length; i++) {
	  	console.log(menu[i].title)
	  	console.log(menu[i].children[i].title)
	  	console.log(menu[i].children[i].children[i].title)
	  }

[Дмитрий Беляев]

Владимир, ну во первых думаю нужно будет отдать эти данные на клиент, например сериализовав в json. Ну и так как в итоге у нас выходит дерево с заранее неизвестной вложенностью, то обрабатывать его нужно спомощью рекурсии, например так:

function makeMenuLevel(menuItems) {
  return `<ul>${menuItems.map(
    item =>`<li>${item.title}${item.children ? makeMenuLevel(item.children) : ''}</li>`;
  ).join('')}</ul>`;
}

[historydev]

Дмитрий Беляев, получаю пустоту,добрый вечер.

function makeMenuLevel(menuItems) {
			  return `<ul>${menuItems.map(
			    item =>`<li>${item.title}${item.children ? makeMenuLevel(item.children) : ''}</li>`;
			  ).join('')}</ul>`;
		}

		io.on('menu', (data) => {
			makeMenuLevel(data)
		})

[Дмитрий Беляев]

Владимир, ну так Вы никуда не выводите результат

[historydev]

Дмитрий Беляев, а как и куда вывести?Функцию в переменную?

[historydev]

Дмитрий Беляев, извините.Туплю часто.

io.on('menu', (data) => {
			let menu = makeMenuLevel(data)
			$('nav').append(menu)
		})

[Дмитрий Беляев]

Владимир, куда угодно, в консоль, на страницу, еще куда Вам нужно

io.on('menu', (data) => {
      console.log(makeMenuLevel(data))
})

[historydev]

Дмитрий Беляев, если найдете 5 минуток,можете прокомментировать код чтобы я понимал,как это работает,спасибо

[Дмитрий Беляев]

Владимир,

connection.query('SELECT * FROM menu', (err, result) => {
  if(err) { // обрабатываем ошибку запроса
    console.error(err);
    return;
  }
  // строим объект из строк с id в качестве ключей, это нужно для быстрого доступа по id
  const index = result.reduce((acc, row) => ({...acc, [row.id]: row}), {});
  const 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); // ну и добавляем к родителю текущую строку как потомка
  }
  console.log(menu);
});

Так как js работает с ссылками, то изменив объект в index мы его так же меняем и в result и в menu

С генерацией html еще проще:

function makeMenuLevel(menuItems) {
  // на каждый уровень вложенности меню мы создаем список ul
  return `<ul>${menuItems.map( // а li генерим для каждого элемента с помощью метода массива map
    item =>`<li>${item.title}${item.children // если у текущего элемента есть потомки
? makeMenuLevel(item.children) // то функция рекурсивно вызывает саму себя, генеря список ul-li для потомков
: ''}</li>`;
  ).join('')}</ul>`;
}