localeCompare array with null values

Question

When I'm sorting my array I get the following error in console:

Uncaught TypeError: Cannot read property 'localeCompare' of null

What I've tried so far:

HTML:

<table class="table table table-striped table-bordered table-hover" id="userLastSyncTable">
<thead>
    <tr>
        <th class="sortable sortDevicePlatform orderDevicePlatformByASC">Device Platform</th>
    </tr>
</thead>
<tbody></tbody>

JavaScript/JQuery:

var TestArray = ["iOS 7", null, "iOS 8.4", null, null, null, "iOS 9"];

ShowUserSyncTable();

function ShowUserSyncTable() {
    var tableRecord = '';

    // Loop through all the returned records and add them to select box
    for (var i = 0; i < TestArray.length; i++) {
        tableRecord += "<tr id=" + "" + "><td>" + TestArray[i] + "</td></tr>";

    }

    $('#userLastSyncTable').find('tbody').html(tableRecord);
}

$(".sortDevicePlatform").click(function () {

    var clickedDevicePlatformSorting = $(this).hasClass('orderDevicePlatformByASC') ? 'orderDevicePlatformByDESC' : 'orderDevicePlatformByASC';

                $('.sortDevicePlatform').removeClass('orderDevicePlatformByASC').removeClass('orderDevicePlatformByDESC');
            $('.sortDevicePlatform').addClass(clickedDevicePlatformSorting);
    // Sort the sync list based on device platform
    TestArray.sort(function (a, b) {

        if (!a) {
            // Change this values if you want to put `null` values at the end of the array
            return -1;
        }
        if (!b) {
            // Change this values if you want to put `null` values at the end of the array
            return +1;
        }

        if (clickedDevicePlatformSorting == 'orderDevicePlatformByASC' && a) return a && b ? a.localeCompare(b) : -1;
        else if (b) return a && b ? b.localeCompare(a) : 1;
    });

    ShowUserSyncTable();
});

How do I go about sorting the array with null values?

Update Fiddle for testing:

FIDDLE

Expected out come:

One click show:

iOS 7, iOS 8.4, iOS 9, null, null, null, null

Another click show:

iOS 9, iOS 8.4, iOS 7, null, null, null, null

Answer 1

Try this: Demo .

Remove orderDevicePlatformByASC class name from clickable <th ...> . Because, its initial appearance is not sorted. Use this for sorting.

TestArray.sort(function (a, b) {
     if (clickedDevicePlatformSorting == 'orderDevicePlatformByASC' && a)            
        return  b ? a.localeCompare(b) : -1;
     else if (b) 
        return a ? b.localeCompare(a) : 1;
});

Answer 2

You cannot call a function on null . You have some null values in your array. So when you try to sort these values, it crashes.

You can protect your code to avoid that.

TestArray.sort(function(a, b) {
    if (!a) {
       // Change this values if you want to put `null` values at the end of the array
       return -1;
    }

    if (!b) {
       // Change this values if you want to put `null` values at the end of the array
       return +1;
    }

    if (sorted)
        return a.localeCompare(b);
    else
        return b.localeCompare(a);
});

But in my opinion, you should get rid of this null values in the array. You can filter them :

TestArray = TestArray.filter(function(val) {
    return val != null;
});

Answer 3

http://jsfiddle.net/0w5ejd5q/2/

TestArray.sort(function(a, b) 
{
    if (sorted && a!=null)
        return a.localeCompare(b);
    else if(b!=null)
        return b.localeCompare(a);
});

Answer 4

Try ternary operator:

 var TestArray = ["iOS 7", null, "iOS 8.4", null, null, null, "iOS 9"]; var sorted = true; var fn = function(a, b) { if (sorted) return a ? a.localeCompare(b) : 1; return b ? b.localeCompare(a) : -1; }; document.write("<pre>"); TestArray.sort(fn); document.write(JSON.stringify(TestArray)); document.write("<br/>"); sorted = !sorted; TestArray.sort(fn); document.write(JSON.stringify(TestArray)); document.write("</pre>");

Answer 5

Simple you can do like this:

tableData.sort((a, b) =>
  a[sorting.field] != null && b[sorting.field] != null
    ? reversed * a[sorting.field].localeCompare(b[sorting.field])
    : null
);

This will separate the null value to one place

Answer 6

The complete method will be like this:

function sortNullColunm(shortingOrder givenArray,sortingField) {
  let resversed = shortingOrder === 'asc'? 1 : -1;

  givenArray.sort((a,b)=>a[sortingField]!=null && b[sortingField]!=null
    ? reversed * a[sortingField].localeCompare(b[sortingField])
    : null
  return givenArray
}

console.log(sortNullColunm(desc,array,fieldname));