Json $。仅显示最后一个元素

我试图用AJAX过滤列表，我遇到了一个问题，html只显示最后一个元素。我读过很多类似的问题，但都没有用。我有变量，所以我不知道问题出在哪里

$("#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

执行此操作时：

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

您正在覆盖以前这些元素中的任何内容。由于您是在循环中执行此操作，因此自然只能看到最后一次写入的结果

您需要：

写入不同的元素，或

追加而不是替换（通过

追加

）

具体细节将取决于您的HTML结构

---

（现在您已经添加了HTML。）我将以不同的方式构造它。一开始就没有任何行（或有占位符“加载”行）。然后构建行并在有响应时追加它们。大致如下：

var entryTemplate=
'' +
'' +
'' +
'' +
''+/***使其成为h2内的一个跨度
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
“
”+
'' +
'' +
'' +
'' +
'';
功能成功（响应）{
var json=$.parseJSON（响应）；
var container=$（“#container”）；
container.empty（）；//删除前面的所有行
$.each（json、函数（键、值）{
var字段=values.fields；
var条目=$（entryTemplate）；
entry.find（“.names”）.text（fields.name）；
entry.find（“.country”）.text（fields.country）；
条目.查找（“.pro_类型”）.text（字段.程序类型）；
entry.find（“.whats”）.text（fields.what）；
container.append（entry.children（））；
});
}
成功(
'[' +
“{”字段：{”+
“名称”：“名称1”+
“国家”：“国家1”+
“程序类型”：“第1部分”+
“什么”：“什么1”+
'}},' +
“{”字段：{”+
“名称”：“名称2”+
“国家”：“国家2”+
“程序类型”：“第2部分”+
“什么”：“什么2”+
'}},' +
“{”字段：{”+
“名称”：“名称3”+
“国家”：“国家3”+
“程序类型”：“第3部分”+
“什么”：“什么3”+
'}}' +
']'
);
setTimeout（函数（）{
成功(
'[' +
“{”字段：{”+
“名称”：“名称4”+
“国家”：“国家4”+
“程序类型”：“第4部分”+
“什么”：“什么4”+
'}},' +
“{”字段：{”+
“名称”：“名称5”+
“国家”：“国家5”+
“程序类型”：“第5部分”+
“什么”：“什么5”+
'}},' +
“{”字段：{”+
“名称”：“名称6”+
“国家”：“国家6”+
“程序类型”：“第6部分”+
“什么”：“什么6”+
'}}' +
']'
);
}, 2000);

执行此操作时：

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

您正在覆盖以前这些元素中的任何内容。由于您是在循环中执行此操作，因此自然只能看到最后一次写入的结果

您需要：

写入不同的元素，或
追加而不是替换（通过
追加
）
具体细节将取决于您的HTML结构


（现在您已经添加了HTML。）我将以不同的方式构造它。一开始就没有任何行（或有占位符“加载”行）。然后构建行并在有响应时追加它们。大致如下：


var entryTemplate=
'' +
'' +
'' +
'' +
''+/***使其成为h2内的一个跨度
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
“
”+
'' +
'' +
'' +
'' +
'';
功能成功（响应）{
var json=$.parseJSON（响应）；
var container=$（“#container”）；
container.empty（）；//删除前面的所有行
$.each（json、函数（键、值）{
var字段=values.fields；
var条目=$（entryTemplate）；
entry.find（“.names”）.text（fields.name）；
entry.find（“.country”）.text（fields.country）；
条目.查找（“.pro_类型”）.text（字段.程序类型）；
entry.find（“.whats”）.text（fields.what）；
container.append（entry.children（））；
});
}
成功(
'[' +
“{”字段：{”+
“名称”：“名称1”+
“国家”：“国家1”+
“程序类型”：“第1部分”+
“什么”：“什么1”+
'}},' +
“{”字段：{”+
“名称”：“名称2”+
“国家”：“国家2”+
“程序类型”：“第2部分”+
“什么”：“什么2”+
'}},' +
“{”字段：{”+
“名称”：“名称3”+
“国家”：“国家3”+
“程序类型”：“第3部分”+
“什么”：“什么3”+
'}}' +
']'
);
setTimeout（函数（）{
成功(
'[' +
“{”字段：{”+
“名称”：“名称4”+
“国家”：“国家4”+
“程序类型”：“第4部分”+
“什么”：“什么4”+
'}},' +
“{”字段：{”+