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.

While I don't understand what you want, if that is copied from your actual code you may want to replace "onlcick" with "onclick". — deg
– deg, Commented Sep 8, 2017 at 13:42
If you don't need to change the URL, <button type="button" onclick="...">...<button> would be more semantically and functionally appropriate for triggering arbitrary JavaScript. — Patrick Kunka
– Patrick Kunka, Commented Sep 8, 2017 at 13:43
I don't get an error in the console - if I add console.log(myStringArray); to each sort function, and then click the sort link, the array is sorted correctly, but then the output of the page is not refreshed to reflect the re-sorted array... — 4532066
– 4532066, Commented Sep 8, 2017 at 13:48

cl3m · Accepted Answer · 2017-09-08 14:01:38Z

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)
})

That's a big help, thank you so much for taking the time to do that, it's much appreciated.

Arkadiusz · Accepted Answer · 2017-09-08 13:59:00Z

1

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>

edited Sep 8, 2017 at 13:59

answered Sep 8, 2017 at 13:53

Arkadiusz

4892 silver badges10 bronze badges

3 Comments

4532066 Over a year ago

Brilliant - thank you. Out of interest - do you know how I could output the contents of the array when the page first loads? So that it still displays the arrays contents before a user has clicked any link, before the rebuild function is triggered? Then if a user clicks to sort data, rebuild is called...

Arkadiusz Over a year ago

I added rebuild(); function to the script after this line in code: SortZA(myStringArray );

4532066 Over a year ago

Great - thanks for your help with this, it's much appreciated.

Collectives™ on Stack Overflow

Sorting JS array without reloading page

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related