javascript - 为什么使用 Jquery 迭代时总是从 json 数组结果中获取最后一行

Question

我在这个结构中有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 数组结尾的最后一个值。这里出了什么问题？

Answer 1

jquery .html 总是覆盖以前的 html，所以我们不能在循环部分使用 html，而是我们可以使用附加它，只需将您的 p 标签附加到结果 div 中 而不是使用这个:-

$("#result").html("<p>" + val.name + "</p>");

像这样使用:-

$("#result").append("<p>" + val.name + "</p>");