Почему данные отображаются много раз по циклу?

Question

Я пытался настроить поисковую систему, связанную с API. Он принимает пользовательский ввод и возвращает информацию из API. В будущем должно быть «динамическое» количество полей ввода, но на данный момент я работаю с фиксированной суммой в пять. Цикл принимает количество полей и вызывает API столько раз, сколько вводится.

Я попытался поместить константу (т. Е. 5) в цикл, но все же забавно то, что с 3 он, конечно, вызывает приложение три раза, но выводит 6 полей, а с 2 он вызывает API 2 раза, но выводит три ряды, поэтому кажется, что он не подчиняется циклу, а что-то еще. В то же время в консоли (с журналом) я вижу, что API правильно вызывается только время, определенное циклом, поэтому я считаю, что что-то идет не так на $.getJSON уровне

Проблема в том, что в конце создается таблица с 15 строками вместо ожидаемых 5 (по одной строке на каждый вход). Почему вы думаете, что это происходит?

Заранее спасибо

<form name="inputform" method="get" width="50">
  <input type="text" name="field0" id="field0" size="50">
  <input type="text" name="field1" id="field1" size="50">
  <input type="text" name="field2" id="field2" size="50">
  <input type="text" name="field3" id="field3" size="50">
  <input type="text" name="field4" id="field4" size="50">
</form>

<table id="table">
  <tr>
    <th>id</th>
    <th>Name</th>
    <th>Age</th>
    <th>Preference</th>
  </tr>
</table>

<input id="getInfo" type="button" value="Submit" /><br/>

var customURL = "http://apitest.com/test/";
var customURL1 = '';

$('#getInfo').click(function() {
  $('#table tr').not(':first').remove();
  var fields = document.getElementsByTagName('input');
  var table = document.getElementById('table');

  if (localStorage.myJSON !== undefined) {
    var myJSON = JSON.parse(localStorage.myJSON);
  }
  var html = '';
  for (var i = 0; i < elements.length - 1; i++) {
    customURL1 = customURL + document.getElementById('field' + i + '').value;
    console.log(customURL1);

    $.getJSON(customURL1, function(data) {
          console.log(data);
          html += '<tr><td>' + data.sample_list.id + '</td><td>' + data.sample_list.name + '</td><td>' + data.sample_list.age + '</td><td>' + data.sample_list.preference + '</td></tr>';
          $('#table tr').first().after(html);

Answer 1

Каждый раз, когда вы получаете ответ AJAX, вы добавляете ответ к переменной html, а затем добавляете его после первой строки таблицы.Поскольку переменная html уже содержит результаты предыдущих ответов и они уже были вставлены в таблицу, вы получите дубликаты.

Вместо того, чтобы объединить новую строку в html, просто вставьте новую строкупрямо в стол.

$.getJSON(customURL1, function(data) {
      console.log(data);
      $('#table tr').first().after('<tr><td>' + data.sample_list.id + '</td><td>' + data.sample_list.name + '</td><td>' + data.sample_list.age + '</td><td>' + data.sample_list.preference + '</td></tr>');