Loop through an array of objects?

Question

I am trying to create a stamp duty calculator.

Currently, I have an array of objects containing 3 properties, every object has the same property name but different values.

I am trying to loop through this array to append property 1 and 2 to a table row if a button is clicked, however the loop appends only the first object properties and not the others.

I know there have been similar queries but none of them have helped. I'm sure there is something simple I am missing.

I have also attached an img for a better understanding of the problem

here is my code

         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);
            }
        }

     }

What value does #input-value have in the instance where it wasn't working? — Bassie
– Bassie, Commented May 11, 2016 at 14:16
After the first time you've replaced {taxband} in the "tableRow" string, it won't be there anymore the next time! — Pointy
– Pointy, Commented May 11, 2016 at 14:19
anything below 125000, I only included it because I needed to check something but it shouldn't have any affect on it — Sai
– Sai, Commented May 11, 2016 at 14:22

Regis Portalez · Accepted Answer · 2016-05-11 14:18:56Z

5

that's because you assign the replaced value of "tableRow" back to "tableRow". After the first iteration, tableRow doesn't contain "{taxband}" anymore, and replace has no effect.

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

You should instead add an intermediate variable:

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

answered May 11, 2016 at 14:18

Regis Portalez

4,9001 gold badge34 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Loop through an array of objects?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related