Во-первых, я хотел бы сказать, что я новичок в javascript, jquery, JSON, и большая часть моего обучения прошла через сайт Microsoft, сайт w3schools и Stack Overflow.
Проблема в том, что я извлекаю данные из веб-API, но данные не отображаются на веб-странице. Я знаю, что данные есть, как они показывают в Google Inspect, а также когда я перешагиваю код в редакторе.
Теперь возвращается ошибка «blank2. html: 241 Uncaught TypeError: Не удалось выполнить appendChild» на «Node»: параметр 1 не относится к типу «Node».
Ниже кода:
function menu(activemenu, roleid) {
var myul = document.createElement("ul");
myul.setAttribute("class", "nav nav-pills nav-sidebar flex-column");
myul.setAttribute("data-widget", "treeview");
myul.setAttribute("role", "menu");
myul.setAttribute("data-accordion", "false");
var uri = 'api/menu';
$.getJSON(uri)
.done(function (data) {
$('#sidemenu').empty();
$.each(data, function (key, item) {
var myli = document.createElement("li");
var n = String(item.roleid);
var x = n.search(String(roleid));
if (x > -1) {
if (activemenu == item.pagename) {
myli.setAttribute("class", "nav-item nav-link active");
} else {
myli.setAttribute("class", "nav-item nav-link");
}
var myi = document.createElement("i");
myi.setAttribute("class", "nav-icon " + item.icon);
myli.appendChild(myi);
var myp = document.createElement("p");
myp.setAttribute("onclick", 'menu("' + item.pagename + "," + roleid + '")');
myp.innerHTML = item.name + '<i class="right fa fa-angle-left"></i>';
myli.appendChild(myp);
myul.appendChild(myli);
}
});
return myul;
});
}
Это код вызова
document.getElementById ("sidemenu"). AppendChild (menu ("", 8));
Редактировать обновление: мне удалось получить код ошибки, чтобы перестать отображаться, но элементы по-прежнему не отображаются. Вот часть html, которая должна получать элементы.
<div id="sidemenu" class="sidebar">
<!-- Sidebar user (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="dist/img/vader.jpg" class="img-circle elevation-2" alt="User Image">
</div>
<div class="info">
<a href="#" class="d-block">Vader</a>
</div>
</div>
</div>
В соответствии с приведенным ниже снимком экрана, код выполняется и возвращает элементы в div бокового меню, но они отображаются. Я подумал, что это могло быть вызвано разделом «stati c» внутри элемента «sidemenu», поэтому я удалил его, попробовал еще раз и получил те же результаты. Я даже очистил свои данные просмотра, просто чтобы убедиться, но все еще получаю тот же сценарий. Моя шляпа снята вам, веб-разработчикам.
Снимок экрана, показывающий элементы
Редактировать 2: Я пришел к выводу, что это в моем обращении к веб-API или Сам l oop, который вызывает проблему. Если я закомментирую код следующим образом
function menu(activemenu, roleid) {
var myul = document.createElement("ul");
var mynav = document.createElement("nav");
myul.setAttribute("class", "nav nav-pills nav-sidebar flex-column");
myul.setAttribute("data-widget", "treeview");
myul.setAttribute("role", "menu");
myul.setAttribute("data-accordion", "false");
mynav.setAttribute("class", "mt-2");
//
//var uri = 'api/menu';
//$.getJSON(uri)
// .done(function (data) {
// $('#sidemenu').empty();
// $.each(data, function (key, item) {
var myli = document.createElement("li");
//var n = String(item.roleid);
//var x = n.search(String(roleid));
//if (x > -1) {
// if (activemenu == item.pagename) {
// myli.setAttribute("class", "nav-item nav-link active");
// } else {
myli.setAttribute("class", "nav-item nav-link");
// }
var myi = document.createElement("i");
myi.setAttribute("class", "nav-icon fa fa-gear"); // + item.icon);
myli.appendChild(myi);
var myp = document.createElement("p");
myp.setAttribute("onclick", 'menu("' + "item.pagename" + '","' + roleid + '")');
myp.innerHTML = "This Page"; //item.name; // + '<i class="right fa fa-angle-left"></i>';
myli.appendChild(myp);
myul.appendChild(myli);
//}
// });
// //return myul;
mynav.appendChild(myul);
// console.log(mynav);
// });
return mynav;
}
, я получу пункт меню, который будет отображаться на странице. Пришло время поиграть в комментарий, пока я не найду реальную проблему.