$ .each отображается только последний элемент

Question

Я пытаюсь отфильтровать список с помощью AJAX, у меня есть проблема, когда HTML показывает только последний элемент.Я прочитал много подобных вопросов SO, но безрезультатно.У меня есть переменные, поэтому я не знаю, в чем проблема.

$("#programme").change(function () {
        event.preventDefault();
        var selected_programme = $(this).val();
      $.ajax({
        url: '{% url "gps_list" %}',
        data: {
          "selected_programme": selected_programme,
        },
        dataType: 'json',
        success: function(response) {
          var json = $.parseJSON(response);
              $.each( json, function( key, values ) {

                  var valname = values.fields.name;
                  var valco = values.fields.country;
                  var valpro = values.fields.programme_type;
                  var valwhat = values.fields.what;

                  console.log(valname, key);
                  console.log(valco);
                  console.log(valpro);
                  console.log(valwhat);

                    $("#names").html(valname);
                    $("#country").html(valco);
                    $("#pro_types").html(valpro);
                    $("#whats").html(valwhat);
              });
          },
          error: function(response) {
            alert("oh no!");
          }
      });
    });

HTML

<div class="row">
      <div class="col-md-12">
        <h2 class="my-4" id="names">
          <small id="country"></small>
        </h2>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="card mb-4">
          <div class="card-body">
            <h2 class="card-title" id="pro_types"></h2>
            <p class="card-text" id="whats"></p>
          </div>
        </div>
      </div>
    </div>

Answer 1

Когда вы делаете это:

$("#names").html(valname);
$("#country").html(valco);
$("#pro_types").html(valpro);
$("#whats").html(valwhat);

вы перезаписываете независимо от того, какие элементы были в них раньше. Поскольку вы делаете это в цикле, естественно, вы видите только результат последней записи.

Вам понадобится либо:

1. Запись в различных элементов или
2. Добавлять вместо замены (через append)

Особенности будут зависеть от вашей структуры HTML.

---

(Теперь, когда вы добавили свой HTML.) Я бы структурировал его по-другому. Не нужно начинать с какой-либо строки (или строки с загрузкой). Затем создайте строки и добавьте их, когда получите ответ. Что-то вроде этого:

var entryTemplate = 
    '<div>' +
        '<div class="row">' +
            '<div class="col-md-12">' +
                '<h2 class="my-4">' +
                    '<span class="names"></span>' + // *** Made it a span inside the h2
                    '<small class="country"></small>' +
                '</h2>' +
            '</div>' +
        '</div>' +
        '<div class="row">' +
            '<div class="col-md-12">' +
                '<div class="card mb-4">' +
                    '<div class="card-body">' +
                        '<h2 class="card-title pro_types"></h2>' +
                        '<p class="card-text whats"></p>' +
                    '</div>' +
                '</div>' +
            '</div>' +
        '</div>' +
    '</div>';

function success(response) {
    var json = $.parseJSON(response);
    var container = $("#container");
    container.empty(); // Removes any previous rows
    $.each( json, function( key, values ) {
        var fields = values.fields;
        var entry = $(entryTemplate);
        entry.find(".names").text(fields.name);
        entry.find(".country").text(fields.country);
        entry.find(".pro_types").text(fields.programme_type);
        entry.find(".whats").text(fields.what);
        container.append(entry.children());
    });
}

success(
    '[' +
        '{"fields": {' +
            '"name": "Name 1",' +
            '"country": "Country 1",' +
            '"programme_type": "PT 1",' +
            '"what": "What 1"' +
        '}},' +
        '{"fields": {' +
            '"name": "Name 2",' +
            '"country": "Country 2",' +
            '"programme_type": "PT 2",' +
            '"what": "What 2"' +
        '}},' +
        '{"fields": {' +
            '"name": "Name 3",' +
            '"country": "Country 3",' +
            '"programme_type": "PT 3",' +
            '"what": "What 3"' +
        '}}' +
    ']'
);

setTimeout(function() {
    success(
        '[' +
            '{"fields": {' +
                '"name": "Name 4",' +
                '"country": "Country 4",' +
                '"programme_type": "PT 4",' +
                '"what": "What 4"' +
            '}},' +
            '{"fields": {' +
                '"name": "Name 5",' +
                '"country": "Country 5",' +
                '"programme_type": "PT 5",' +
                '"what": "What 5"' +
            '}},' +
            '{"fields": {' +
                '"name": "Name 6",' +
                '"country": "Country 6",' +
                '"programme_type": "PT 6",' +
                '"what": "What 6"' +
            '}}' +
        ']'
    );
}, 2000);

<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>