Цикл через массив объектов?

Question

Я пытаюсь создать калькулятор гербового сбора.

В настоящее время у меня есть массив объектов, содержащий 3 свойства, каждый объект имеет то же имя свойства, но разные значения.

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

Я знаю, что были похожие запросы, но ни один из них не помог. Я уверен, что есть что-то простое, что мне не хватает.

Я также прилагается IMG для лучшего понимания проблемы

вот мой код

  var taxbands = [ 
     { 
      min: 0, 
      max: 125000, 
      percent: 0 
     }, 
     { 
      min: 125000, 
      max: 250000, 
      percent: 0.02 
     }, 
     { 
      min: 250000, 
      max: 925000, 
      percent: 0.05 
     }, 
     { 
      min: 925000, 
      max: 1500000, 
      percent: 0.1 
     }, 
     { 
      min: 1500000, 
      max: null, 
      percent: 0.12 
     } 
    ] 

    var tableRow = "<tr><td>{taxband}</td><td>{percent}</td><td>{taxable}</td><td>{TAX}</td></tr>"; 

    $('#calculate').on('click', function calculateButton() { 
     calculateStampDuty(); 
    }) 

    function calculateStampDuty() { 

     var userInput = parseInt($("#input-value").val()); 

     for (i = 0; i < taxbands.length; i++) { 
      if (userInput < 125000) { 
       tableRow = tableRow.replace("{taxband}", taxbands[i].min + "-" + taxbands[i].max); 
       $("#explained-table").append(tableRow); 
      } 
     } 

    } 

Answer 1

это потому, что вы назначаете заменить значение «TableRow» обратно "TableRow". После первой итерации tableRow больше не содержит «{taxband}», а замена не влияет.

tableRow = tableRow.replace("{taxband}", taxbands[i].min + "-" + taxbands[i].max); 
       $("#explained-table").append(tableRow); 

Вместо этого вы должны добавить промежуточную переменную:

var myRow = tableRow.replace("{taxband}", taxbands[i].min + "-" + taxbands[i].max); 
       $("#explained-table").append(myRow);