Sorting and unsorting function

Question

I made script for sorting (A to Z)

My question is what I need to add to this to have unsort function, I mean set to default (how it was before you sort them).

Code:

function sortList() {
  document.getElementById('sortedtxt').innerHTML = 'Sorted A-Z';
  document.getElementById('sortedtitle').innerHTML = 'BFMAS - Sorted A-Z';
  var list, i, switching, b, shouldSwitch;
  list = document.getElementById("sortingUL");
  switching = true;
  while (switching) {
    switching = false;
    b = list.getElementsByTagName("LI");
    for (i = 0; i < (b.length - 1); i++) {
      shouldSwitch = false;
      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}

I don't think that this would be possible, except if you store somewhere the order before sorting. — Babis.amas, Dec 07 '21 at 23:21
@johnSmith except that given how their implementing it here, it would be a copy of DOM elements... — Inigo, Dec 07 '21 at 23:53
Before you sort set data-index on all the elements. You can then resort with those values. Also odd you are not just using array.sort() — epascarello, Dec 08 '21 at 00:02
@Inigo i doubt that there will be any recognizable performance impact or whatever makes u in fact its more inperformant to do dom-manipulation for each iteration than replacing / appending it once — john Smith, Dec 08 '21 at 08:23
@johnSmith that's exactly why i ... see the lead para of my answer. — Inigo, Dec 08 '21 at 14:39

score 1 · Answer 1 · answered Dec 08 '21 at 01:44

Please use this code JS & HTML

  let globalList, temp = [], sorted = true;

  document.getElementById("sort").addEventListener('click', sortList);
  document.getElementById("unsorted").addEventListener('click', UnsortedList);

  function UnsortedList() {
    let currentList = document.getElementById("countries");
    currentList.innerHTML = '';
    temp.forEach(function (item) {
      let li = document.createElement('li');
      currentList.appendChild(li);
      li.innerHTML += item;
    });
    sorted = true;
  }

  function getTempArray(pList) {
    globalList = pList.getElementsByTagName("li");
    temp = [];
    for (let j = 0; j < globalList.length; j++) {
      temp.push(globalList[j].innerText);
    }
  }

  function sortList() {
    let list, i, switching, b, shouldSwitch;
    list = document.getElementById("countries");

    if (sorted === true) {
      getTempArray(list);
      sorted = false;
    }

    switching = true;

    while (switching) {
      switching = false;
      b = list.getElementsByTagName("li");
      for (i = 0; i < (b.length - 1); i++) {
        shouldSwitch = false;
        if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
      if (shouldSwitch) {
        b[i].parentNode.insertBefore(b[i + 1], b[i]);
        switching = true;
      }
    }
  }

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Pues </title>
</head>
<body>
<p>Click the button to sort the list alphabetically </p>
<button id="sort"><b>Sort</b></button>
<button id="unsorted"><i>Unsorted</i></button>

<ul id="countries">
    <li>Peru</li>
    <li>Argentina</li>
    <li>Brazil</li>
    <li>Colombia</li>
    <li>Paraguay</li>
    <li>Bolivia</li>
</ul>

</body>
</html>

Thank you, it's working :D – Aleksa Rakocevic Dec 11 '21 at 20:32 — Aleksa Rakocevic, Dec 11 '21 at 20:32

score 0 · Answer 2 · edited Dec 07 '21 at 23:49

First, it seems kind crazy that you are sorting DOM elements in situ (in place), rather than having a separate list data structure (e.g. an array) and treating the DOM as a view... i.e. rendering the list data into the DOM as needed (i.e. after it updates or after you sort it).

Recommendation:

Move the sortedtxt data into an array.
Keep a copy of the array for the original sort order.
create and call a function that renders the array elements into the DOM, e.g. into the appropriate <ul>, <ol> or <table>.
On a user action that changes the sort order or restores the original, apply that to the array and then call the above function again.

Benefits:

Better webpage performance.
Cleaner, simpler that separates data from presentation code.
You can implement fancier sort features such as Sort array of objects by string property value much easier.

Sorting and unsorting function

2 Answers2