当使用Jquery迭代时，为什么总是从json数组结果中获得最后一行
当使用Jquery迭代时，为什么总是从json数组结果中获得最后一行
提问于 2017-08-12 15:02:40
我在这个结构中有json数据
下面是我的json代码https://jsonblob.com/309e8861-7f26-11e7-9e0d-cf3972f3635e
下面是我的jquery代码示例
$("#getJsonData").click(function(){
$.get(base_url + 'roles/index', function(data) {
var data = $.parseJSON(data);
$.each(data, function(index, val) {
$("#result").html("<p>" + val.name + "</p>");
});
});
});HTML文件
<button id="getJsonData">Load role list</button>
<div id="result"></div>我不明白这一点，当我做console.log时，我从控制台的json中得到每个值，但是当使用html方法在屏幕上以html的形式显示结果时，它只显示结束最后一个json数组的最后一个值。这里出了什么问题？
回答 3
Stack Overflow用户
发布于 2017-08-12 15:05:24
jquery .html总是覆盖以前html，所以我们不能在循环部分使用html，而可以使用append它，只需在result div中添加p标记，而不是使用以下内容：-
$("#result").html("<p>" + val.name + "</p>");像这样使用：-
$("#result").append("<p>" + val.name + "</p>");Stack Overflow用户
发布于 2017-08-12 16:08:35
您正在用代码覆盖html
$("#result").html("<p>" + val.name + "</p>");相反，您可以将结果存储在变量中，然后将其写入element.Like
$("#getJsonData").click(function(){
$.get(base_url + 'roles/index', function(data) {
var data = $.parseJSON(data);
var html = '';
$.each(data, function(index, val) {
html +="<p>" + val.name + "</p>";
});
$("#result").html(html);
});
});Stack Overflow用户
发布于 2017-08-12 19:20:18
你的代码应该是：
$("#getJsonData").click(function(){
$.get(base_url + 'roles/index', function(data) {
var data = $.parseJSON(data);
var listHtml="";
$.each(data, function(index, val) {
listHtml=listHtml+ "<p>" + val.name + "</p>";
});
$("#result").html(listHtml);
});})；
和Html应该与您的
<button id="getJsonData">Load role list</button>
<div id="result"></div>工作示例是here
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45647501
复制相关文章
相似问题
腾讯云开发者
