JavaScript Sort DOM

Question

I am trying to sort DOM based on a data-* attribute. The DOM looks like this, albeit repeated and with incrementing ids and different image source:


  
    
    
        Preview
    
    
      Default Template
      Owned

I'm doing the sorting via a 's change event, I have the following:

const templateSort_Change = (e) => {
    const templateSort = e.currentTarget;
    const templateSortValue = templateSort.value;
    const sort = JSON.parse(templateSortValue);
    const cols = document.querySelectorAll('div.col');
    const sortedCols = Array.from(cols).sort((a, b) => {
        if (sort.direction === 'desc') {
            return a.dataset[sort.field].toLowerCase() - b.dataset[sort.field].toLowerCase();
        } else {
            return b.dataset[sort.field].toLowerCase() - a.dataset[sort.field].toLowerCase();
        }
    });
    for (let col of cols) {
        col.parentNode.appendChild(col);
    }
}

The issue is that when it goes to do the for/of loop, the result of cols is the same order every time and looking at the documentation I'm not exactly sure why. I get that I'm doing string comparison, but these ids are still single digits (e.g. 1, 2, 3, etc.).

What am I doing wrong in my sort function that is causing the array to return the same order every time?

user_11887902 · Answer

For sorting strings you need localeCompare method, the minus ( - ) for sorting numbers not string.

  const sortedCols = Array.from(cols).sort((a, b) => {
    if (sort.direction === 'desc') {
        return b.dataset[sort.field].localeCompare(a.dataset[sort.field])
    } else {
        return a.dataset[sort.field].localeCompare(b.dataset[sort.field);
    }
});

user_14936001 · Answer

When you do string comparison with -, it will return you a NaN.

console.log('abc' - 'abd');
console.log('a' - 'b');

What you want to do is to use localeCompare().

console.log('abc'.localeCompare('abd'));
console.log('abd'.localeCompare('abc'));
console.log('a'.localeCompare('b'));
console.log('b'.localeCompare('a'));

user_378779 · Answer

A few issues: First, your asc/desc sorting was backward, so I've fixed that. Second, most important, your for (let col of cols) loop should iterate over sortedCols, not cols. Third, I'm not sure how you intended to update the DOM but I've done it by adding a wrapper

to all your cols.

const templateSort_Change = (e) => {
    const templateSort = e.currentTarget;
    const templateSortValue = templateSort.value;
    const sort = JSON.parse(templateSortValue);
    const cols = document.querySelectorAll('div.col');
    const sortedCols = Array.from(cols).sort((a, b) => {
        if (sort.direction === 'asc') {
            return a.dataset[sort.field].toLowerCase() - b.dataset[sort.field].toLowerCase();
        } else {
            return b.dataset[sort.field].toLowerCase() - a.dataset[sort.field].toLowerCase();
        }
    });
    document.getElementById('container').innerHTML = '';
    
    for (let col of sortedCols) {
        document.getElementById('container').appendChild(col);
    }
}

document.querySelector('select').addEventListener('change', templateSort_Change);


    
      
        
        
            Preview
        
        
          Default Template 1
          Owned 1
        
      
    
    
      
        
        
            Preview
        
        
          Default Template 2
          Owned 2
        
      
    
    
      
        
        
            Preview
        
        
          Default Template 3
          Owned 3
        
      
    
    
      
        
        
            Preview
        
        
          Default Template 4
          Owned 4

JavaScript Sort DOM

3 Answers