Sort unordered list with href javascript

Question

I have an unordered list as:

<ul id = "mylist">
 <li><a href="https://firebasestorage.googleapis.com/v0/b/cse611-3045f.appspot.com/o/test%40gmail.com%2F10-10-2019%2Ftest%40gmail.com-10-10-2019.xlsx?alt=media&amp;token=21f64bfe-c7ce-4155-a24e-6684e784a8fd">10-10-2019</a></li>
 <li><a href="https://firebasestorage.googleapis.com/v0/b/cse611-3045f.appspot.com/o/test%40gmail.com%2F11-10-2019%2Ftest%40gmail.com-11-10-2019.xlsx?alt=media&amp;token=36367037-770e-4e99-b405-571c5aa79a64">11-10-2019</a></li>
 <li><a href="https://firebasestorage.googleapis.com/v0/b/cse611-3045f.appspot.com/o/test%40gmail.com%2F5-10-2019%2Ftest%40gmail.com-5-10-2019.xlsx?alt=media&amp;token=407ed4f5-b530-4149-99f6-fde685fba34a">5-10-2019</a></li></ul>

I want to sort them into

<ul>
  <li a href="#">11-10-2019</a></li>
  <li a href="#">10-10-2019</a></li>
  <li a href="#">5-10-2019</a></li>
</ul>

PS : I want the same URL, just using '#' here to avoid work.

But the code currently I have written isnt sorting it properly. I guess it's because of the href?

My code:

var container = document.getElementById("myList");
var contents = container.querySelectorAll("li");

var list = [];
for(var i=0; i<contents.length; i++){
    list.push(contents[i]);

}

list.sort(function(a, b){
    var aa = parseInt(a.innerHTML);
    var bb = parseInt(b.innerHTML);
    return aa < bb ? -1 : (aa > bb ? 1 : 0);
});

/* list.reverse(); */

for(var i=0; i<list.length; i++){
    console.log(list[i].innerHTML);
    container.insertBefore(list[i], container.firstChild);
}

Answer 1

You're selecting li elements. Their innerHTML looks like this:

'<a href="https://firebasestorage.googleapis.com/v0/b/cse611-3045f.appspot.com/o/test%40gmail.com%2F10-10-2019%2Ftest%40gmail.com-10-10-2019.xlsx?alt=media&amp;token=21f64bfe-c7ce-4155-a24e-6684e784a8fd">10-10-2019</a>'

Instead of sorting on the parseInt of this value, you should be sorting on the innerHTML of the a elements, and probably doing a more precise job of it than parseInt . For example:

/// Compares two dates in d-m-Y format.
function compareDates(a, b) {
    var aParts = a.split('-').map(Number);
    var bParts = b.split('-').map(Number);

    return aParts[2] - bParts[2] ||
           aParts[1] - bParts[1] ||
           aParts[0] - bParts[0];
}

with

list.sort(function(a, b){
    var aDate = a.children[0].innerHTML;
    var bDate = b.children[0].innerHTML;

    return compareDates(aDate, bDate);
});

Answer 2

You can directly use the textContent of the li s to get the dates and then compare them directly as date objects, assuming the same structure.

 var container = document.getElementById("myList"); var contents = Array.from(container.querySelectorAll("li")); contents = contents.sort(function(a, b){ var aa = new Date(a.textContent.replace('-','/')); var bb = new Date(b.textContent.replace('-','/')); console.log(aa,bb); return aa < bb? 1: (aa > bb? -1: 0); }); console.log(contents.map(x =>x.innerHTML)); while (container.firstChild) { container.removeChild(container.firstChild); } contents.forEach(content => { container.appendChild(content); });

 <ul id = "myList"> <li><a href="https://firebasestorage.googleapis.com/v0/b/cse611-3045f.appspot.com/o/test%40gmail.com%2F10-10-2019%2Ftest%40gmail.com-10-10-2019.xlsx?alt=media&amp;token=21f64bfe-c7ce-4155-a24e-6684e784a8fd">10-10-2019</a></li> <li><a href="https://firebasestorage.googleapis.com/v0/b/cse611-3045f.appspot.com/o/test%40gmail.com%2F11-10-2019%2Ftest%40gmail.com-11-10-2019.xlsx?alt=media&amp;token=36367037-770e-4e99-b405-571c5aa79a64">11-10-2019</a></li> <li><a href="https://firebasestorage.googleapis.com/v0/b/cse611-3045f.appspot.com/o/test%40gmail.com%2F5-10-2019%2Ftest%40gmail.com-5-10-2019.xlsx?alt=media&amp;token=407ed4f5-b530-4149-99f6-fde685fba34a">5-10-2019</a></li></ul>

Answer 3

Here another way to achieve your goal which parses the text as dates, clears the container and then fills it back up with newly created list items :

 var container = document.getElementById("myList"); var contents = Array.from(container.querySelectorAll("li>a")); contents.sort(function(a, b){ var aa = Date.parse(a.textContent); var bb = Date.parse(b.textContent); return aa < bb? -1: (aa > bb? 1: 0); }); /* contents.reverse(); */ //clear the container container.innerHTML = ''; for(var i=0; i<contents.length; i++){ listElem = document.createElement('li'); listElem.appendChild(contents[i]); container.appendChild(listElem); }

 <ul id="myList"> <li><a href="#">10-10-2019</a></li> <li><a href="#">11-10-2019</a></li> <li><a href="#">5-10-2019</a></li> </ul>

Answer 4

You don't need to change your code that much:

you only need to make that change:

var aa = new Date(a.querySelector('a').innerHTML).getTime();
var bb = new Date(b.querySelector('a').innerHTML).getTime();

 var container = document.querySelector("#mylist"); var contents = container.querySelectorAll("li"); var list = [...contents]; list.sort(function(a, b){ var aa = new Date(a.querySelector('a').innerHTML).getTime(); var bb = new Date(b.querySelector('a').innerHTML).getTime(); return aa < bb? -1: (aa > bb? 1: 0); }); /* list.reverse(); */ for(var i=0; i<list.length; i++){ console.log(list[i].innerHTML); container.insertBefore(list[i], container.firstChild); }

 <ul id = "mylist"> <li> <a href="#">10-10-2019</a></li> <li> <a href="#">11-10-2019</a></li> <li> <a href="#">5-10-2019</a></li> </ul>