Push Object to array, with selector on properties

Question

I have a simple piece of code that in my mind should work

HTML

<table cellpadding="0" cellspacing="0" border="0">
    <tbody><tr>
        <th scope="row">Quantity</th>
        <th id="js-QuantityID-1" scope="col">1</th>
        <th id="js-QuantityID-2" scope="col">2</th>
        <th id="js-QuantityID-3" scope="col">3</th>
        <th id="js-QuantityID-4" scope="col">4</th>
        <th id="js-QuantityID-5" scope="col">5</th>
        <th id="js-QuantityID-6" scope="col">10</th>
        <th id="js-QuantityID-7" scope="col">15</th>
        <th id="js-QuantityID-8" scope="col">20</th>
        <th id="js-QuantityID-9" scope="col">30</th>
        <th id="js-QuantityID-10" scope="col">40</th>
        <th id="js-QuantityID-11" scope="col">100</th>
    </tr>
    <tr>
        <th scope="row">Price (inc. VAT)</th>
        <td id="js-PriceID-1">£45.60</td>
        <td id="js-PriceID-2">£76.80</td>
        <td id="js-PriceID-3">£97.20</td>
        <td id="js-PriceID-4">£128.40</td>
        <td id="js-PriceID-5">£172.80</td>
        <td id="js-PriceID-6">£307.20</td>
        <td id="js-PriceID-7">£402.00</td>
        <td id="js-PriceID-8">£432.00</td>
        <td id="js-PriceID-9">£630.00</td>
        <td id="js-PriceID-10">£840.00</td>
        <td id="js-PriceID-11">£2100.00</td>
    </tr>
    </tbody>
</table>

Javascript

function getTableContents() {
    var productArray = [];

    for (var x = 0; x <= 12; x++) {
        productArray.push({ Price: $('#js-PriceID-' + x).text(), Qty: $('#js-QuantityID-' + x).text() });
    }

    console.log("Array: " + productArray);    
}

But at the end of the execution of this code, I end up with an array with the two properties 'undefined'. If I manually enter the selector ID it works fine, it seems to be with the for loop and getting the values at runtime.

Why is this and is there a workaround?

you're getting js-PriceID-0 and js-PriceID-12 which don't exist. Modify your loop to: for(var x = 1; x < 12; x++) — Oliver Barnwell
– Oliver Barnwell, Commented Jun 29, 2015 at 21:46

Alp · Accepted Answer · 2015-06-29 21:46:42Z

3

First item in the loop is 0, and last item is 12. That's why.

Try your loop as follows:

for (var x=1; x<=11; x++)

answered Jun 29, 2015 at 21:46

Alp

3,1471 gold badge16 silver badges29 bronze badges

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

Comments

Sebastian Nette · Accepted Answer · 2015-06-29 22:03:57Z

2

The loop runs from 0 until 12 so it will look up js-PriceID-0 and js-PriceID-12, which both don't exist. Same goes for js-QuantityID-0and js-QuantityID-12.

Use this instead:

for (var x = 1; x < 12; x++) {
    productArray.push({ Price: $('#js-PriceID-' + x).text(), Qty: $('#js-QuantityID-' + x).text() });
}

To save some time you could also do something like this:

function getTableContents() {
    var productArray = [];

    // loop through all elements with an id that starts with "js-QuantityID-"
    $("th[id^='js-QuantityID-']").each(function () {    
        var n = $(this).attr("id").replace('js-QuantityID-',''); // get the number from the id

        productArray.push({
            Price: $('#js-PriceID-' + n).text(),
            Qty: $(this).text()
        });
    });

    console.log("Array: ", productArray);    
}

edited Jun 29, 2015 at 22:03

answered Jun 29, 2015 at 21:47

Sebastian Nette

7,9022 gold badges20 silver badges18 bronze badges

3 Comments

John Cooling Over a year ago

Thanks for the explanation, so if an element doesn't exist it will break the loop thus not getting the properties as 0 was not an ID of mine.

Sebastian Nette Over a year ago

It won't break the loop, but you will get undefined as value if they don't exist.

Oliver Barnwell Over a year ago

As a side-note, might be nicer semantically speaking to start your price and quantity ids at 0

Collectives™ on Stack Overflow

Push Object to array, with selector on properties

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related