Добрый вечер.Я пытаюсь вывести меню,до этого оно выводилось на 1 секунду и пропадало,сейчас я все-же смог его вывести,но некорректно..
Помогите пожалуйста..
Клиент:
<!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">
nav {
color: #555;
}
</style>
</head>
<body>
<nav></nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var io = io('http://localhost:3000/');
function makeMenuLevel(menuItems) {
return `<ul>${menuItems.map(
item =>`<li>${item.title}${item.children ? makeMenuLevel(item.children) : ''}</li>`
).join('')}</ul>`;
}
$(document).on('click',(e) => {
var xhr = new XMLHttpRequest();
var body = 'id=' + encodeURIComponent(123);
xhr.open("POST", '/menu', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(body);
})
io.on('menu', (data) => {
const menu = makeMenuLevel(data)
$('nav').append(menu)
console.log(data)
})
</script>
</body>
</html>
Server:
app.get('/menu', (req,res) => {
res.sendFile(__dirname + '/menu.html')
})
app.post('/menu', (req,res) => {
connection.query('SELECT * FROM menu', (err, result) => {
if(err) {
console.error(err);
return;
}
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);
return io.emit('menu',menu)
}
});
})
