Sorting JS array without reloading page

Question

I have the following:

HTML:

<ul id="listing"></ul>

JS:

// sort functions:

function SortLen(arr, ascYN) {
        arr.sort(function (a, b) {
            if (ascYN) return a.length - b.length;
            else return b.length - a.length;
        });
    }

function SortAZ (arr) {
        arr.sort(function (a, b) {
            if (a < b) return -1;
            else if (a > b) return 1;
            return 0;
        });
    }

function SortZA (arr) {
        arr.sort(function (a, b) {
            if (a > b) return -1;
            else if (a < b) return 1;
            return 0;
        });
    }

// define array

var listing = document.getElementById("listing");
var myStringArray = ["Saab", "Volvo", "BMW", "Mercedes", "Volkswagon", "Ford"];

// sort the array

// SortLen( myStringArray, false );
// SortLen( myStringArray, true );
// SortAZ( myStringArray );
SortZA( myStringArray );

// display the array

var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
    listing.innerHTML += "<li>" + myStringArray[i] + "</li>";
}

As the code stands at the moment, I have to comment out out of the sort options to change the sort output e.g.

SortLen( myStringArray, false );
// SortLen( myStringArray, true );
// SortAZ( myStringArray );
// SortZA( myStringArray );

And then I have to reload the page to pick up the change and sort the array differently.

I wondered if there could be any way I could change the code so that I can add links to the HTML to add links - e.g.

<div id="sort">
    <a href="#" onclick="SortLen( myStringArray, false );">Long - Short</a>
    <a href="#" onclick="SortLen( myStringArray, true );">Short-Long</a>
    <a href="#" onclick="SortAZ( myStringArray );">Short-Long</a>
    <a href="#" onclick="SortZA( myStringArray );">Long-Short</a>
</div>

So that when clicked, the LI items generated would be resorted dynamically without refreshing the page each time.

Answer 1

First, you should extract the display in a separate method that you would call after every sort :

function draw (array) {
  var arrayLength = array.length;
  document.getElementById('listing').innerHTML = ''
  for (var i = 0; i < arrayLength; i++) {
    document.getElementById('listing').innerHTML += "<li>" + array[i] + "</li>";
  }
}

You should avoid inline event handling, and attach an event handler to the dom elements:

<a id="a" href="#" >Long - Short</a>

document.getElementById('a').addEventListener('click', function(ev){
  SortLen( myStringArray, false );
  draw(myStringArray)
})

See Working Fiddle

Html

<div id="sort">
    <a id="a" href="#" >Long - Short</a>
    <a id="b" href="#" >Short-Long</a>
    <a id="c" href="#" >Short-Long</a>
    <a id="d" href="#" >Long-Short</a>
</div>

Javascript

 const SortLen = function (arr, ascYN) {
     arr.sort(function (a, b) {
         if (ascYN) return a.length - b.length;
         else return b.length - a.length;
     });
  }

function SortAZ (arr) {
        arr.sort(function (a, b) {
            if (a < b) return -1;
            else if (a > b) return 1;
            return 0;
        });
    }

function SortZA (arr) {
        arr.sort(function (a, b) {
            if (a > b) return -1;
            else if (a < b) return 1;
            return 0;
        });
    }

// define array

var listing = document.getElementById("listing");
var myStringArray = ["Saab", "Volvo", "BMW", "Mercedes", "Volkswagon", "Ford"];

// sort the array
SortZA( myStringArray );

function draw (array) {
  var arrayLength = array.length;
  document.getElementById('listing').innerHTML = ''
  for (var i = 0; i < arrayLength; i++) {
    document.getElementById('listing').innerHTML += "<li>" + array[i] + "</li>";
  }
  console.log(array)
}
draw(myStringArray)


document.getElementById('a').addEventListener('click', function(ev){
console.log('okok')
  SortLen( myStringArray, false );
  draw(myStringArray)
})
document.getElementById('b').addEventListener('click', function(ev){
  SortLen( myStringArray, true );
  draw(myStringArray)
})
document.getElementById('c').addEventListener('click', function(ev){
  SortAZ( myStringArray );
  draw(myStringArray)
})
document.getElementById('d').addEventListener('click', function(ev){
  SortZA( myStringArray );
  draw(myStringArray)
})

Answer 2

You have to rebuild html each time you sort the table. Your code change html only on load and after that only array is sorted. It is simple javascript not angular where it could work. You can try this code:

<div id = "sort" >
    < a href="javascript:SortLen( myStringArray, false ); rebuild();">Long - Short</a>
    <a href = "javascript:SortLen( myStringArray, true ); rebuild();" > Short - Long </ a >
    < a href="javascript:SortAZ( myStringArray ); rebuild();">Short-AZ</a>
    <a href = "javascript:SortZA( myStringArray ); rebuild();" > Long - ZA </ a >
</ div >

< ul id="listing"></ul>

<script>

function SortLen(arr, ascYN)
{
    arr.sort(function(a, b) {
        if (ascYN) return a.length - b.length;
        else return b.length - a.length;
    });
}

function SortAZ(arr)
{
    arr.sort(function(a, b) {
        if (a < b) return -1;
        else if (a > b) return 1;
        return 0;
    });
}

function SortZA(arr)
{
    arr.sort(function(a, b) {
        if (a > b) return -1;
        else if (a < b) return 1;
        return 0;
    });
}

// define array

var myStringArray = ["Saab", "Volvo", "BMW", "Mercedes", "Volkswagon", "Ford"];

// sort the array

// SortLen( myStringArray, false );
// SortLen( myStringArray, true );
// SortAZ( myStringArray );
SortZA(myStringArray );
rebuild();
// display the array

function rebuild()
{
    var listing = document.getElementById("listing");
    var arrayLength = myStringArray.length;
    listing.innerHTML = "";
    for (var i = 0; i < arrayLength; i++)
    {
        listing.innerHTML += "<li>" + myStringArray[i] + "</li>";
    }
}

</script>