0

I got a problem with the function sort. I maybe don't use it in a good way so I ask how resolve this little problem. This is the error I get

Uncaught TypeError: Cannot read property 'sort' of undefined

$(document).ready(function() {

  var c_user_list = $('.user-list')
  element_html_template = '<div class="user-item"><img  src="" /><h3>name</h3><p></p></div>';


  users = [{
    "name": "Tichus Findley",
    "age": 17,
    "color": "8BC34A",
    "avatar": "http://findicons.com/files/icons/1072/face_avatars/300/i02.png"
  }, {
    "name": "Dick stanson",
    "age": 28,
    "color": "3F51B5",
    "avatar": "http://findicons.com/files/icons/1072/face_avatars/300/g02.png"
  }, {
    "name": "John Williams",
    "age": 25,
    "color": "F44336",
    "avatar": "http://findicons.com/files/icons/1072/face_avatars/300/g01.png"
  }, {
    "name": "Peter macgreirson",
    "age": 36,
    "color": "4197f5",
    "avatar": "http://findicons.com/files/icons/1072/face_avatars/300/i04.png"
  }, {
    "name": "Denny peterson",
    "age": 16,
    "color": "FF5722",
    "avatar": "http://findicons.com/files/icons/1072/face_avatars/300/i05.png"
  }]

  function buildUserItem(user) {
    var element_template = $(element_html_template);
    $('.user-list').append(element_template);
    element_template.find("h3").text(user.name);
    element_template.find("p").text("Age :" + user.age);
    element_template.find("img").prop("src", user.avatar)
    element_template.find("img").css("background-color", "#" + user.color)
  }


  for (i = 0; i < users.length; i++) {
    buildUserItem(users[i]);
  }
  $('.normale').click(function retourNormale() {
    c_user_list.html("");
    for (i = 0; i < users.length; i++) {
      buildUserItem(users[i]);
    }
  })

  $('.majeur').click(function triMajeur() {
    var triMajUser = users;
    c_user_list.html("");
    for (i = 0; i < triMajUser.length; i++) {
      if (triMajUser[i].age > 18) {
        buildUserItem(triMajUser[i]);
      }
    }
  })

  $('.Pprenom').click(function triMajeur() {
    var triPprenomUser = users;
    c_user_list.html("");
    for (i = 0; i < triPprenomUser.length; i++) {
      if (triPprenomUser[i].name.match(/p/gi)) {
        buildUserItem(triPprenomUser[i]);
      }
    }
  })

  $('.alphabetique').click(function triAlphabetique() {
    var triAlphabetique = users;
    c_user_list.html("");
    triAlphabetique.name.sort();

    for (i = 0; i < triAlphabetique.length; i++) {
      buildUserItem(triAlphabetique[i]);

    }

  })


})
.user-item {
  height: 50px;
  width: 400px;
  position: relative;
  background-color: #9E9E9E;
  padding: 10px;
  border-bottom: solid 1px black;
}
.user-item img {
  height: 40px;
  width: 40px;
  background-color: #3F51B5;
  border-radius: 50%;
  position: absolute;
}
.user-item p {
  position: absolute;
  margin: 0px;
  top: 30px;
  left: 80px;
}
.user-item h3 {
  margin: 0px;
  position: absolute;
  left: 80px;
  font-size: 15px;
  font-family: 'helvetica'
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
 Lister des utilisateurs
</h1>
<p>
  Mettez des actions sur les boutons. Le HTML présent dans la div .user-list n'est la que pour montrer la structure du conteneur, vous devrez générer vous même ce contenu. Supprimer donc l'intégralité du contenu de .user-list quand vous commencez. Un tableau
  d'object d'utilisateur a été créée pour vous
</p>

<div class="user-list">

</div>

<button class="majeur">
  Afficher seulement les mecs qui ont plus de 18 ans
</button>
<button class="Pprenom">
  Afficher seulement les mec qui on un P dans leurs nom
</button>
<button class="alphabetique">
  Afficher dans l'ordre alphabetique
</button>
<button class="normale">
  Revenir à la normale
</button>
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
  • 1
    please add the relevant code here. – Nina Scholz May 31 '16 at 15:59
  • I've added your code here for you but pay attention to why it would not let you just post a JSFiddle link. Your code must be posted in your question, not just at an external source. – Mike Cluck May 31 '16 at 16:01
  • Arrays don't have a `name` property. That's why `triAlphabetique.name` is `undefined`. Do you want to sort the objects by the `name` property? – Felix Kling May 31 '16 at 16:01
  • ok thx mate, first use of stackoverflow ^^' –  May 31 '16 at 16:01
  • i got an array object with properties color, name,age, avatar –  May 31 '16 at 16:02
  • 1
    Read how [sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) works, you need to pass a function to it if you want to sort objects by their properties. See: http://jsfiddle.net/bzfue34m/20/ – Danmoreng May 31 '16 at 16:03
  • The objects **inside** the array have these properties, but not the array itself. Good: `users[0].name`, bad: `users.name`. – Felix Kling May 31 '16 at 16:04
  • Yes, I tried this too but the problem is that I want to sort all the array so I did triAlphabetique[i].name.sort(); in the for loop, it dont works PS: im a beginner in JS so I dont got all the mechanisms of the language –  May 31 '16 at 16:08
  • user2415266 thx, I dont understand what a and b mean –  May 31 '16 at 16:10
  • Read the [`sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) documentation. – Felix Kling May 31 '16 at 16:16

1 Answers1

0

Read how sort works, you need to pass a function to it if you want to sort objects by their properties. See: http://jsfiddle.net/bzfue34m/35/

triAlphabetique.sort(function(a, b) {
  var nameA = a.name.toUpperCase(); // ignore upper and lowercase
  var nameB = b.name.toUpperCase(); // ignore upper and lowercase
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // names must be equal
  return 0;
);
Danmoreng
  • 2,367
  • 1
  • 19
  • 32