Цикл массива JavaScript JQuery

Question

пожалуйста, кто-нибудь может мне помочь с моим циклическим массивом? Из-за какого-то безумия я не могу заставить его зацикливаться, я знаю, что это должно быть просто любые идеи, которые я пропустил.

Большое спасибо

var i;
for (i = 0; i < 5; i++) {
  $('#display').html('<p> Price: ' + data.results[i].value_inc_vat + '</p>');
  $('#display').append('<p> Time : ' + data.results[i].valid_from + '</p>');
  $('#display').append([i]);
}

Answer 1

Примечание: -Этот ответ основан на вашем вопросе. массив генерируется мной. Я думаю, что код работает правильно, и проблема в html () , который удаляет старый HTML и добавляет новый HTML, и вам нужно просто заменить html() на append () добавит новыйHTML коды.

let data = {
  results: [{
    value_inc_vat: '1',
    valid_from: 'Today'
  }]
}

for (let i = 0; i < data.results.length; i++) {
  $('#display').append('<p> Price: ' + data.results[i].value_inc_vat + '</p>');
  $('#display').append('<p> Time : ' + data.results[i].valid_from + '</p>');
  $('#display').append([i]);
}

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

Answer 2

Ваш код зациклен правильно. Проблема в том, что вы используете html(), который полностью перезаписывает весь существующий контент в элементе. Поэтому при каждой последующей итерации вы удаляете ранее добавленный контент. Чтобы это исправить, измените html() на append():

let data = {
  results: [{
    value_inc_vat: 'value_inc_vat1',
    valid_from: 'valid_from1'
  },{
    value_inc_vat: 'value_inc_vat2',
    valid_from: 'valid_from2'
  }]
}

var i;
for (i = 0; i < 2; i++) {
  $('#display').append('<p> Price: ' + data.results[i].value_inc_vat + '</p>');
  $('#display').append('<p> Time : ' + data.results[i].valid_from + '</p>');
  $('#display').append([i]);
}

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

Стоит также отметить, что вы можете использовать map() для построения массива строк, который затем вы можете append() только один раз для повышения производительности. Попробуйте это:

let data = {
  results: [{
    value_inc_vat: 'value_inc_vat1',
    valid_from: 'valid_from1'
  },{
    value_inc_vat: 'value_inc_vat2',
    valid_from: 'valid_from2'
  }]
}

var html = data.results.map(function(result) {
  return '<p>Price: ' + result.value_inc_vat + '</p><p>Time : ' + result.valid_from + '</p>';
  
  // interpolated string version, note this won't work in IE:
  //return `<p>Price: ${result.value_inc_vat}</p><p>Time : ${result.valid_from}</p>`;
});
$('#display').append(html);

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