Sort array of JS Objects

Question

Sort array of JS Objects

Navigation

#1 by (3 votes)

2

Talk Galera, I started to study JS and created a list function that creates the list that verifies the user's gender and creates a list as below.

<ul>
     <li>Diego é homem e possui 23 anos</li>
     <li>Gabriela é mulher e possui 18 anos</li>
     <li>José é homem e possui 30 anos</li>
     <li>Maria é mulher e possui 27 anos</li>
</ul>

<button onClick="">Ordenar por nome</button>
<button onClick="">Ordenar por idade</button>

<button onClick="">Exibir apenas homens</button>
<button onClick="">Exibir apenas mulheres</button>
<button onClick="">Exibir todos</button>

The first two buttons should sort the list, by name and by age. The other 3 buttons should apply filters in the list displaying only men, only women or all. The filter should work next to sorting so it should be possible to filter only men and sort by age.

I have already created the function to sort by age, gave a console log and is ordering my doubt is how do I only order when I click the button

var users = [{
    nome: 'Diego',
    idade: 23,
    sexo: 'M',
  },
  {
    nome: 'Gabriela',
    idade: 18,
    sexo: 'F',
  },
  {
    nome: 'José',
    idade: 30,
    sexo: 'M',
  },
  {
    nome: 'Maria',
    idade: 27,
    sexo: 'F'
  },
  {
    nome: 'Amanda',
    idade: 26,
    sexo: 'F'
  }
];

function list() {
  // Cria a lista do elemento
  var listElement = document.createElement("ul");

  for (let value of users) {
    sexo = value.sexo;

    switch (sexo) {
      case "F":
        value.sexo = "Feminino";
        users = value.nome + " é " + value.sexo + " e possui " + value.idade + " anos."
        break;

      case "M":
        value.sexo = "Masculino";
        users = value.nome + " é " + value.sexo + " e possui " + value.idade + " anos."
        break;
    }

    //Cria a lista de item
    var itemElement = document.createElement('li');

    //Define seu conteudo
    itemElement.appendChild(document.createTextNode(users));

    //Adiciona um item a lista
    listElement.appendChild(itemElement);
  }

  return listElement;
}

function byAge(a, b) {
  return a.idade - b.idade;
}

//console.log(users.sort(byAge));

// Add the contents of options[0] to #foo:
document.querySelector('#app').appendChild(list(users));

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div id="app"></div>

  <button class="btn btn-info" onClick="byName()">Ordenar por nome</button>
  <button class="btn btn-info" onClick="byAge()">Ordenar por idade</button>

  <button class="btn btn-info" onClick="">Exibir apenas homens</button>
  <button class="btn btn-info" onClick="">Exibir apenas mulheres</button>
  <button class="btn btn-info" onClick="">Exibir todos</button>
</div>

javascript

asked by anonymous 18.11.2018 / 01:44

1 answer

Modifier of access "private" in TypeScript Create custom property in JavaScript [closed]

score 3 · Accepted Answer

I have already created the function to sort by age, gave a console log and is ordering my doubt is how do I only order when I click the button

It seems that your difficulty is to call the function by the button, but also a bit of logic, I decided to create a basic structure where one function shows the data, another function formats the view and other shows the filtered data and ordered.

Example:

var users = [{
    nome: 'Diego',
    idade: 23,
    sexo: 'M',
  },
  {
    nome: 'Gabriela',
    idade: 18,
    sexo: 'F',
  },
  {
    nome: 'José',
    idade: 30,
    sexo: 'M',
  },
  {
    nome: 'Maria',
    idade: 27,
    sexo: 'F'
  },
  {
    nome: 'Amanda',
    idade: 26,
    sexo: 'F'
  }
];

var show = 'all';

function textList(u) {
  return u.nome + " é " + (u.sexo == 'M' ? "Masculino" : "Feminino") + " e possui " + u.idade + " ano(s)";
}

function byName() {
  users.sort(function(a, b) {
    return a.nome < b.nome ? -1 : (a.nome > b.nome) ? 1 : 0;
  });
  list();
}

function byAge() {
  users.sort(function(a, b) {
    return a.idade < b.idade ? -1 : (a.idade > b.idade) ? 1 : 0;
  });
  list();
}

function showUsers(value) {
  show = value;
  list();
}

function list() {
  var listElement = document.getElementById("data");
  listElement.innerHTML = '';
  for (i = 0; i < users.length; i++) {
    if (show == 'all' || users[i].sexo == show) {
      var itemElement = document.createElement('li');
      itemElement.innerHTML = textList(users[i]);
      listElement.appendChild(itemElement);
    }
  }
}
list(); // init

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<ul id="data">
</ul>
<button class="btn btn-info" onClick="byName()">Ordenar por nome</button>
<button class="btn btn-info" onClick="byAge()">Ordenar por idade</button>

<button class="btn btn-info" onClick="showUsers('M');">Exibir apenas homens</button>
<button class="btn btn-info" onClick="showUsers('F');">Exibir apenas mulheres</button>
<button class="btn btn-info" onClick="showUsers('all');">Exibir todos</button>

It has been split into functions so that by clicking the button you can execute the filter or sorting and soon after updating the display list with the modification. On the buttons in event onClick these functions were called with the appropriate parameters.

Important Items: