JSON：数据未显示在网页中

Question

首先，我想说我是 javascript、jquery、JSON 的新手，我的大部分学习都是通过 microsoft 站点、w3schools 站点和 Stack Overflow 进行的。

手头的问题是我从 web-api 中提取数据，但数据未显示在网页中。我知道数据在那里，就像它在谷歌检查中显示的那样，以及当我在编辑器中单步执行代码时。

现在返回的错误是“blank2.html:241 Uncaught TypeError: 无法在“节点”上执行“appendChild”：参数 1 不是类型 '节点'”。

代码下方：

    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>

根据下面的屏幕截图，代码正在运行并将元素返回到sidemenu div，但它们正在显示。我认为这可能是由 sidemenu div 中的静态 div 引起的，所以我将其删除并再次尝试并得到相同的结果。我什至清除了我的浏览数据只是为了确保但仍然得到相同的情况。我向你们 Web 开发人员致敬。

Screenshot showing the elements

编辑 2：我得出的结论是在我对 web api 的调用或导致问题的循环本身中。如果我像这样注释掉代码

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;
}

我将在页面上显示一个菜单项。是时候玩取消注释的游戏了，直到我找到真正的问题。

Answer 1

我试过你的代码，它运行良好。检查 Html sidemenu div 是否存在。或与此答案进行交叉检查。

function myfun() {
document.getElementById("sidemenu").appendChild(menu("",1));
}

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) {
	   var data={"item":{"roleid":"1","pagename":"a1","name":"n1","icon":"i1.ico"}};
            $('#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;
       // });
		}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="myfun()">Click</button>
<div id="sidemenu" name="sidemenu"></div>