JAVASCRIPT: Sort HTML list by name and age

Question

JAVASCRIPT: Sort HTML list by name and age

Asked 6 years, 5 months ago

Viewed 1,105 times

3

Good night,

I need to sort a list of HTML phrases by user name or 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>

UPDATING:

If necessary, this is the full version.

Phrases are mounted from the array users (as seen in the link above). I was able to make the filters work, so I chose to reduce the code, to facilitate.

Like I need the ordering to work together with the filters, I understood that it might be necessary to take the list from the HTML, to keep the filters in order (in my attempts, if I took from the array, I would have to clear the list, which would eliminate the filter).

Where does this list come from?

– novic

2018/06/27 at 22:32
I changed the question explaining better how the list is obtained, @Virgilionovic

– EdeiltonSO

2018/06/27 at 23:23

2 answers

6

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 take only the numerical value of age (there can be no other number in the text than 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>

Browser other questions tagged javascript html order

You are not signed in. Login or sign up in order to post.

by Wérick Vieira • 66 points · Answer 1 · 2018-06-27T23:22:16+00:00

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>