javascript - JSON:数据未显示在网页中
问题描述
首先,我想说我是 javascript、jquery、JSON 的新手,我的大部分学习都是通过 microsoft 站点、w3schools 站点和 Stack Overflow 进行的。
手头的问题是我从 web-api 中提取数据,但数据没有显示在网页中。我知道数据就在那里,就像它在谷歌检查中显示的那样,以及当我在编辑器中单步执行代码时。
现在返回的错误是“blank2.html:241 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type '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>
根据下面的屏幕截图,代码正在运行并将元素返回到sidemenu div,但它们正在显示。我认为这可能是由 sidemenu div 中的静态 div 引起的,所以我将其删除并再次尝试并得到相同的结果。我什至清除了我的浏览数据只是为了确保但仍然得到相同的情况。我向你们 Web 开发人员致敬。
编辑 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;
}
我将在页面上显示一个菜单项。是时候玩取消评论游戏了,直到我找到真正的问题。
解决方案
我试过你的代码,它运行良好。检查 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>
推荐阅读
- c++ - 看不到文件“SDL2.lib”
- c - 在字符串中查找制表符和/或空格分隔的单词(生成文件中目标中的依赖项)
- function - 汇编命令在没有我明确调用的情况下运行
- javafx - 如何在不改变坐标的情况下在 JavaFX 中绘制清晰的细线
- reactjs - 在 TypeScript 组件类中使用 react-spring 会引发编译问题
- ios - 使用 Swift 在 Mapbox 中为弹出窗口(语音气泡)创建按钮
- arrays - 替换数组索引处的元素,然后使用 for 循环重置数组
- javascript - 如何从字符串中删除所有 Unicode,但保留语言,例如:日语、希腊语、印地语等
- python - sympy 的 plot_parametric 说 TypeError: can't convert complex to float
- java - 能够成功写入数据但无法从服务器读取数据