How to use selection sort with Dates?

Question

I am trying to code using selection sort with parallel arrays, rearrange the content based on the publication date in ascending order (oldest to newest). Making sure that the name that is associated with the value stay in parallel with the other. The date should remain presented with Month, date, year, in that order. I was looking in my textbook and they only show an example with test scores entered, how can I compare dates in this array?

 function main() { var myArr = new Array(["To Kill a Mockingbird", "July 11, 1960"], ["Jaws", "February 1, 1974"], ["Don Quixote", "July 11, 1615"], ["Moby-Dick", "October 18, 1851"], ["Northern Lights", "November 12, 1995"]); original(myArr); selectionSort(myArr); } function original(myarray) { for (var i = 0; i < 2; i++) { myarray[i]; for (var j = 0; j < 2; j++) { myarray[i][j]; } } var table = document.getElementById("myTable"); for (var i = 0, row; row = table.rows[i]; i++) { for (var j = 0, col; col = row.cells[j]; j++) { col.innerText = myarray[i][j]; } } return myarray; } function selectionSort(arr) { var minIdx, temp, len = arr.length; for (var i = 0; i < len; i++) { minIdx = i; for (var j = i + 1; j < len; j++) { if (arr[j] < arr[minIdx]) { minIdx = j; } } temp = arr[i]; arr[i] = arr[minIdx]; arr[minIdx] = temp; } var table2 = document.getElementById("myTable2"); for (var i = 0, row; row = table2.rows[i]; i++) { for (var j = 0, col; col = row.cells[j]; j++) { col.innerText = arr[i][j]; } } return arr; } main();

 table { border: solid black; } body { margin: 10ex; color: black; font-weight: bold; } td { font-size: 18px; color: black; font-weight: bold; margin: 10%; padding: 5px; line-height: 120%; width: 75pt; height: 25pt; text-align: center; }

 <h2>Original Table</h2> <table style="width: 50%" id="myTable" border="1"> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> <br/><br/> <h2>Selection Sort</h2> <table style="width: 50%" id="myTable2" border="1"> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>

Answer 1

I think the main issue is that you are comparing arrays instead of comparing dates:

if (arr[j] < arr[minIdx]) {
        minIdx = j;
      }

Instead of nested looping to sort elements you can use .sort() function:

 function main() { var myArr = new Array(["To Kill a Mockingbird", "July 11, 1960"], ["Jaws", "February 1, 1974"], ["Don Quixote", "July 11, 1615"], ["Moby-Dick", "October 18, 1851"], ["Northern Lights", "November 12, 1995"]); original(myArr); selectionSort(myArr); } function original(myarray) { for (var i = 0; i < 2; i++) { myarray[i]; for (var j = 0; j < 2; j++) { myarray[i][j]; } } var table = document.getElementById("myTable"); for (var i = 0, row; row = table.rows[i]; i++) { for (var j = 0, col; col = row.cells[j]; j++) { col.innerText = myarray[i][j]; } } return myarray; } function selectionSort(arr) { // sort array let newArray = arr.sort(function(a, b) { const prev = new Date(a[1]); const next = new Date(b[1]); if(prev > next) return 1; if(prev < next) return -1; return 0; }); var table2 = document.getElementById("myTable2"); //console.log(table2.rows); for (var i = 0; i < table2.rows.length; i++) { // add title table2.rows[i].cells[0].innerText = newArray[i][0]; // add date table2.rows[i].cells[1].innerText = newArray[i][1]; } return newArray; } main();

 table { border: solid black; } body { margin: 10ex; color: black; font-weight: bold; } td { font-size: 18px; color: black; font-weight: bold; margin: 10%; padding: 5px; line-height: 120%; width: 75pt; height: 25pt; text-align: center; }

 <h2>Original Table</h2> <table style="width: 50%" id="myTable" border="1"> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> <br /><br /> <h2>Selection Sort</h2> <table style="width: 50%" id="myTable2" border="1"> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>