在Javascript中的數組排序無法讀取屬性

Question

我遇到了函數sort的問題。我可能不會以很好的方式使用它，所以我問如何解決這個小問題。這是錯誤我得到

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>

Answer 1

瞭解如何sort的作品，你需要的，如果你想通過自己的屬性對象進行排序的功能傳遞給它。請參閱：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; 
);