Bubble sort on elements

Question

I have a table that contains the theoretical rate of something (id=ratebaseX) and the actual observed rate of something (id=rateseenX). I have a javascript that runs through each pair and simple calculates the difference (id=calcX).

After this difference is calculated, I would like to do a bubble sort on the calcIDs array based on this calculated difference. I don't actually want to change the html or anything thing in the calcIDs class, just the index in the array.

For tests, I dump the first three array elements into an alert box because I know they are originally out of order.

function calcLikelihood(){
    ratebaseIDs = document.querySelectorAll('[id^="ratebase"]');
    rateseenIDs = document.querySelectorAll('[id^="rateseen"]');
    calcIDs = document.querySelectorAll('[id^="calc"]');

    for(i=0;i<calcIDs.length;i++){
        likelihood = Math.round((ratebaseIDs[i].innerHTML - rateseenIDs[i].innerHTML)*100)/100;
        calcIDs[i].innerHTML = likelihood;
        calcIDs[i].likelihood = likelihood;
    }
    //bubble sort based on likelihood
    for(i=0;i<calcIDs.length;i++){
        for(j=0;j<(calcIDs.length-1);j++){
            if(calcIDs[j].likelihood<calcIDs[j+1].likelihood){
                temp = calcIDs[j];
                calcIDs[j] = calcIDs[j+1];
                calcIDs[j+1] = temp;
            }
        }
    }
    alert("0) " + calcIDs[0].likelihood +"\n1) " + calcIDs[1].likelihood+"\n2) " + calcIDs[2].likelihood);
}

The problem is that first three elements do not move. I am pretty sure I got the bubble sorting correct. I think the problem is that calcIDs is acutally an array of pointers?

Answer 1

Your bubble sort is ok, I checked it:

 var calcIDs = [{likelihood: 84}, {likelihood: 56}, {likelihood: 68}, {likelihood: 81}]; //bubble sort based on likelihood for(i=0;i<calcIDs.length;i++){ for(j=0;j<(calcIDs.length-1);j++){ if(calcIDs[j].likelihood<calcIDs[j+1].likelihood){ temp = calcIDs[j]; calcIDs[j] = calcIDs[j+1]; calcIDs[j+1] = temp; } } } console.log("0) " + calcIDs[0].likelihood +"\\n1) " + calcIDs[1].likelihood+"\\n2) " + calcIDs[2].likelihood); // 84, 81, 68 

So, I think the problem is that document.querySelectorAll doesn't return an array. It returns an object of type NodeList whereas you can normally sort only true arrays in JS. I mean you can apply a sorting algorithm to a collection, but the "sorted" items will be shown in the same predefined order as they have been shown before sorting. A simple workaround might be converting the collection of nodes into an actual array like this:

var arr = Array.prototype.slice.call(nodes); // nodes = document.querySelectorAll(".your_selector");

and then you will be able to apply the sorting and get what you expect. It is ok for your purpose because you state you don't want to change the view. I hope this late answer helps :)