带有 JSON 数据的 jQuery 循环

Question

我正在向 Ajax 函数发送一些 JSON 数据，数据如下所示：{"one": 21, "two": 10, "three": 19, "four": 100}使用 jQuery，我现在想在<h3>标签中显示这些数据。例如，我想把所有的都one, two, ...放在一边。这是我尝试过的： $.ajax({  url: $("#container").attr("data-url"),  dataType: 'json',  success: function (data) {    $.each(data, function(key, val) {        $('#test').text(key);    });  }});html<h3 id="test"></h3>这段代码的问题在于它只显示数组的第一次出现，在这种情况下，我只会看到“ one”。有人可以帮我找出我做错了什么吗？

Answer 1

您每次都在循环中覆盖该元素。您需要连接所有键，然后将其放入元素中。

success: function(data) {

    var text = Object.keys(data).join(', ');

    $('#test').text(text);

}

Answer 2

您正在覆盖每个循环中的密钥。您需要将它们全部添加到一个变量中，然后打印出来。由于您希望它们全部位于一侧（垂直），因此您需要通过换行符将它们分开并使用html()而不是添加它们text()；

var t = '';

$.each(data, function(key, val) {

    t += key + '<br/>';

});

$('#test').html(t);

我假设您也想要另一边的值。假设您想用等号分隔键和值：

var t = '';

$.each(data, function(key, val) {

    t += key + ' = ' + val + '<br/>';

});

$('#test').html(t);

Answer 3

$.ajax({

url: $("#container").attr("data-url"),

dataType: 'json',

success: function (data) {

    $.each(data, function(key, val) {

        $('#test').append(key + ', ');

    });

}

});

只需使用 $('#test').append 而不是 $('#test').text 来保留之前添加的键