JQuery цикл с данными JSON

Question

Я отправляю некоторые данные JSON в функцию Ajax, вот как эти данные выглядят:

{"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, чтобы сохранить ранее добавленные ключи