JavaScript sorting issue with looping

Question

I'm not entirely sure what my issue is here. I have the following sorting procedure that sorts a "table" (Not an actual HTML table):

function sortByName(tableBody) {
    var projectList = [];
    for (var i = 0; i < tableBody.length; i++) {
        projectList.push(tableBody[i]);
    }
    console.log("about to enter");
    //console.log(tableRows);
    for(var i = 0; i < tableBody.length; i++){
        var currentRow = tableBody[i];
        if(currentRow.innerText !== null){
            currentRow.style.display ="none";
        }
    }
    projectList.sort(function(a,b){
        var nameA = a.innerText.toUpperCase(); // ignore upper and lowercase
        var nameB = b.innerText.toUpperCase(); // ignore upper and lowercase
        if (nameA < nameB) {
            return -1;
        }
        if (nameA > nameB) {
            return 1;
        }

        // names must be equal
        return 0;
    });
    console.log(projectList);

    for(var q = 0; q < projectList.length; q++){
        redisplayProjects(q, projectList);
    }
}

function redisplayProjects(index, projectList){
    console.log(projectList);
    projectList[index].style.display = 'block';
}

Displaying to the console, the projectList is in fact sorted in the console but upon toggling the style.display back to 'block' the rows appear in the same order as they were pre-sorted. Am I missing something that anyone can help with?

Actually what you do is sorting **array** not the order of elements in DOM. If you want to reorder the elements you should either swap their places in DOM or use css, i.e. order combined with flexbox. — Jakub Rożek, May 06 '16 at 18:58
why do you think that sorting of array should affect actual dom? — Iłya Bursov, May 06 '16 at 18:58
Sorting an array containing DOM elements will not have any affect on the DOM. After sorting the array, you could put them in the new order in the DOM using **Node.appendChild**: https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild — Rick Hitchcock, May 06 '16 at 18:58
All of you were right, I gaffed and forgot that i needed to Append them back into the DOM. Thanks! — RunFranks525, May 06 '16 at 19:09
I belive the title should read "JavaScript: DOM Collection Sorting issue". — Bekim Bacaj, May 06 '16 at 20:53

Bekim Bacaj · Accepted Answer · 2016-05-06T20:26:44.610

2

Assuming that the sortByName function-argument tableBody is expecting a DOM Row collection of a certain table, - use this.:

function sortByName( tableBody ) {
    var i = 0, projectList = [].slice.call(tableBody).

    sort( function( a, b ){
        var A = a.innerText.toUpperCase(), B = b.innerText.toUpperCase();
        return A < B ? -1 : A > B ? 1 : 0;
    }), wrapper = tableBody[0].parentElement;

    while( projectList[i] )wrapper.appendChild( projectList[i++] );
}

I'm also assuming that with this, instant sort function you will not need to switch the display style property of elements, as they will be placed in their respective sort order, instantly!

Regards.

p.s.: still not sure what tableBody really is, therefore depending on the update to this info, the function given, might, or might not need further tweaking.

edited May 06 '16 at 20:26

answered May 06 '16 at 20:00

Bekim Bacaj

5,707
2
24
26

tableBody is essentially, in my implementation a collection of div's that i made act like rows. so its like var tableBody = document.querySelectorAll(".tableRows"); After some comments above, your implementation is essentially what I resulted with. So I'll accept yours as the answer. Thanks a lot! – RunFranks525 May 06 '16 at 20:22
Check the update - should work with your div collection too. `sortByName( document.querySelectorAll(".tableRows") ) ` – Bekim Bacaj May 06 '16 at 20:28

score 1 · Answer 2 · answered May 06 '16 at 18:59

You made an array out of elements from tableBody (whatever that is), and then re-arrange those elements within that array. But you made no changes to tableBody itself, which, even if you had, might not have the desired result (again, no idea what is in tableBody).

JavaScript sorting issue with looping

2 Answers2

Linked