$.each only the last element is shown - json

Question

I'm trying to filter a list with AJAX, I have an issue where the html only shows the last element. I have read a lot of similar SO questions and to no avail. I have variables, so I don't know whats the issue.
$("#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

When you do this:
$("#names").html(valname);
$("#country").html(valco);
$("#pro_types").html(valpro);
$("#whats").html(valwhat);
you're overwriting whatever those elements had in them before. Since you're doing that in a loop, naturally you only see the result of the last write.
You'll need to either:
Write to different elements, or
Append rather than replacing (via append)
The specifics will depend on your HTML structure.
(Now that you've added your HTML.) I would structure it differently. Don't have any row at all (or have a placeholder "loading" row) to start with. Then build rows and append them when you have a response. Something along these lines:
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>