Question

I am completly confused. It is my first web project based on Javascript and jQuery (no other language is used). It’s some sort of textiles shop. Sizes got different prices. Like 38-43 costs 20, and 43-48 costs 22, and 48-52 costs 24. That’s the way I want to put it on the website (38-43 => 20, 43-48 => 22, etc). The articles are stored in an xml file, like so:

<article id="025064">
    <title>Tshirt</title>
    <desc>Description</desc>

    <size value="38" price="50,12" />
    <size value="39" price="50,12" />
    <size value="40" price="50,12" />
    <size value="41" price="50,12" />
    <size value="42" price="50,12" />
    <size value="43" price="50,12" />
    <size value="44" price="50,12" />
    <size value="45" price="50,12" />
    <size value="46" price="50,12" />
    <size value="47" price="54,15" />
    <size value="48" price="54,15" />
    <size value="49" price="54,15" />
    <size value="50" price="54,15" />
    <size value="51" price="58,18" />
    <size value="52" price="58,18" />
    <size value="53" price="58,18" />
    <size value="54" price="58,18" />
</article>

I use jQuery to parse it. That all works. Now I am at the point to find the lowest and highest size of an price. For that I put everything I know in an Array.

var prices = new Object();
var laenge = 0;

$(this).find('size').each(function(){
    var size = $(this).attr('value');
    var price = $(this).attr('price');

    if(typeof(prices[price])!=="undefined")
    {
        laenge = prices[price].length;
    }

    prices[price] = new Array();
    prices[price][laenge] = size;
});

Now I tried to get the highest and lowest size of an price by sorting the array,

$.each(prices, function(index, value){
    prices[index].sort();
    var maximum = prices[index].length-1;
    alert(prices[index][0]+" "+prices[index][maximum]);
});

But I just get the value from the 0 index. All other index’es (above 0) doesnt work, even though the var maximum says there are several elements. By using this next code (within the code I showed before) showed me that the index are named like it is regular used to be (0, 1, 2, 3, 4, 5):

$.each(prices[index], function(index1, value) {
    alert(index1);
});

But I can’t access them. I am so confused. Yea, I know, I should use Console.Log the next time. But that shouldnt be there problem here 🙂

Used browser: Google Chrome 17.0.963.66 m
Web server (sadly): IIS v6 on win server 2003 standard

Thank you so much in advance!

Best,
Calvin

Answer 1

You can not access any element after 0 in your Example, because you’re erasing any previous values in this line

$(this).find('size').each(function(){
    ...
    // here you erase all previous values of prices
    prices[price] = new Array();
    ...
});

You could fix that by only creating a new array, when there is none present, like this:

var prices = {};
$(this).find('size').each(function() {
  var size = $(this).attr('value');
  var price = $(this).attr('price');

  // first ensure that there is an array at prices[price]
  // '[]' and 'new Array()' are equivalent in this case
  prices[price] = prices[price] || [];    

  // don't hassle with the last index, simply add the size
  prices[price].push(size);
});

A word on the prices[price] || [] line:
Unlike C/Java the || operator in JavaScript does not return the boolean comparison between the involved values, but the left hand value, if it is equal to true or the right hand value, if the left hand value is false. So [1,2,3] || [] will return the [1,2,3] but undefined || [] will return the empty Array.