JAVASCRIPT: Sort HTML list by name and age

Question

JAVASCRIPT: Sort HTML list by name and age

Navigation

#1 by (6 votes)
#2 by (2 votes)

2

Good evening,

I need to sort a list of HTML phrases by user name or by age, depending on which button is clicked. How can I do this?

Below is a clearer version of the code:

<html>
<head>
    <title>JS</title>
</head>
<body>
    <div id="master">
        <button onClick="orderName()">Ordenar por nome</button>
        <button onClick="orderIdade()">Ordenar por idade</button>
        <br/>
        <ul id="lista-usuarios">
            <li>João é homem e possui 23 anos"</li>
            <li>Ana é mulher e possui 19 anos"</li>
            <li>Ricardo é homem e possui 32 anos"</li>
            <li>Fernanda é mulher e possui 25 anos"</li>
        </ul>
    </div>
    <script>
        function orderName() {
            var list = document.querySelector("#lista-usuarios");
            console.log("Ordenado por nome");
        }
        function orderIdade() {
            var list = document.querySelector("#lista-usuarios");
            console.log("Ordenado por idade");
        }
    </script>
</body>
</html>

UPDATE:

If necessary, this is the full version .

Phrases are assembled from the users array (as seen in the link above). I managed to make the filters work, so I opted to reduce the code, to make it easier.

Since I need the order to work along with the filters , I understood that it might be necessary to get the list from HTML , to keep the filters in order (in my attempts, if I took from the array, you would have to clean the list, which would remove the filter).

javascript html order

asked by anonymous 27.06.2018 / 23:56

2 answers

2

function getNumber(str) {
	return +str.textContent.match(/\d/gi).join('')
}

function orderIdade() {
  const list = document.querySelector("#lista-usuarios");
  const listChildren = [...list.children];
  const numbers = listChildren.map(item => getNumber(item));
  const listOrder = numbers
    .sort()
    .map(number => listChildren.filter(item => getNumber(item) === number));
   list.innerHTML = listOrder.map(item => '<li>${item[0].textContent}</li>').join('');
}

function orderNome() {
  const list = document.querySelector("#lista-usuarios");
  const listChildren = [...list.children]
  	.map(item => item.textContent)
    .sort();
 	list.innerHTML = listChildren.map(item => '<li>${item}</li>').join('');
}

<ul id="lista-usuarios">
  <li>João é homem e possui 23 anos</li>
  <li>Ana é mulher e possui 19 anos</li>
  <li>Ricardo é homem e possui 32 anos</li>
  <li>Fernanda é mulher e possui 25 anos</li>
</ul>

<button class='btn' onClick="orderNome()">Ordenar pelo nome</button>
<button class='btn' onClick="orderIdade()">Ordenar pela idade</button>

28.06.2018 / 01:22

How to get index of the current iteration of a foreach? Get object content without knowing the attribute name

score 6 · Accepted Answer

Using .map() , .sort() and .filter() you can sort. Note that in the case of age it was necessary to use regular expression with .match() to get only the numerical value of age (there can be no other number in the text but the age!):

function orderName() {
   var list = document.querySelector("#lista-usuarios"); // seleciona a UL
   var list_lis = list.querySelectorAll("li"); // seleciona as LIs
   var nova_list = ''; // crio uma variável vazia que será usada para construir uma nova lista ordenada
   [].map.call(list_lis, function(a){ // mapeio as LIs retornando o texto
      return a.textContent;
   }).sort().filter(function(a){ // ordeno em ordem alfabética e retorno o texto ordenado
      nova_list += '<li>'+a+'</li>'; // concateno o texto construindo uma nova lista
   });
   
   list.innerHTML = nova_list; // substituo o conteúdo da UL pelos novos LIs ordenados
  
   console.log("Ordenado por nome");
}

function orderIdade() {
   var list = document.querySelector("#lista-usuarios");
   var list_lis = list.querySelectorAll("li");
   var nova_list = '';
   [].map.call(list_lis, function(a){
      return a.textContent.match(/\d+/); // aqui eu seleciono apenas a idade
   }).sort().filter(function(a){ // ordeno em ordem numérica (o .sort() faz isso automaticamente)
      nova_list += '<li>'+a.input+'</li>'; // concateno o texto
   });
   
   list.innerHTML = nova_list;
  
   console.log("Ordenado por idade");
}

<div id="master">
  <button onClick="orderName()">Ordenar por nome</button>
  <button onClick="orderIdade()">Ordenar por idade</button>
  <br/>
  <ul id="lista-usuarios">
      <li>João é homem e possui 23 anos"</li>
      <li>Ana é mulher e possui 19 anos"</li>
      <li>Ricardo é homem e possui 32 anos"</li>
      <li>Fernanda é mulher e possui 25 anos"</li>
  </ul>
</div>