带有 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) {&nbsp; &nbsp; var text = Object.keys(data).join(', ');&nbsp; &nbsp; $('#test').text(text);}

Answer 2

您正在覆盖每个循环中的密钥。您需要将它们全部添加到一个变量中，然后打印出来。由于您希望它们全部位于一侧（垂直），因此您需要通过换行符将它们分开并使用html()而不是添加它们text()；var t = '';$.each(data, function(key, val) {&nbsp; &nbsp; t += key + '<br/>';});$('#test').html(t);我假设您也想要另一边的值。假设您想用等号分隔键和值：var t = '';$.each(data, function(key, val) {&nbsp; &nbsp; t += key + ' = ' + val + '<br/>';});$('#test').html(t);

Answer 3

$.ajax({url: $("#container").attr("data-url"),dataType: 'json',success: function (data) {&nbsp; &nbsp; $.each(data, function(key, val) {&nbsp; &nbsp; &nbsp; &nbsp; $('#test').append(key + ', ');&nbsp; &nbsp; });}});只需使用 $('#test').append 而不是 $('#test').text 来保留之前添加的键