为什么嵌套for循环中的代码无法执行？

Question

I have two objects. One with lots of data about persons (like born, name, birthplace, etc.) and one with an array for each character in the alphabet. My goal is to get through every person in my persons object and compare the first letter of the persons name with the properties of the alphabet object. So that I can sort the persons names alphabetical in my alphabet object through a push operation. This is what I came up with. The problem is, that the code within my 2nd loop just won't get executed and I can't find the problem.

angular.module('ArtistsCtrl', []).controller('ArtistsController', ['$scope', 'Artists', function ($scope, Artists) {

$scope.data = {};

$scope.tagline = 'A';

Artists.query(function (res) {
    $scope.data.artists = res;
    $scope.sortedNames = {A: [], B: [], C: [], D: [], E: [], F: [], G: [], H: [], I: [], J: [] , K: [], L: [], M: [], N: [], O: [], P: [], Q: [], R: [], S: [], T: [], U: [], V: [], W: [], X: [], Y: [], Z: []};
    var sortedNamesProperties = Object.getOwnPropertyNames($scope.sortedNames);

    (function () {
        //loop to go through my artists array
        for(var i = 0; i <= $scope.data.artists.length; i++){
            //loop to go through my sortedNames array
            for(var z = 0; z <= $scope.sortedNames.length; z++){
                if($scope.data.artists[i].displayname.charAt(0) == sortedNamesProperties[z]){
                    $scope.sortedNames[z].push($scope.data.artists[i]);
                    break;
                }
            }
        }
    })()
});

}]);

EDIT:

Thank you for all the possibilities you posted. The hint that I deal with an obj and not an array solved it :) I rewrote the code in the following way, although they are may be some better and more efficient ways to deal with it. But thanks a lot for your help. Especially @ Andy

angular.module('ArtistsCtrl', []).controller('ArtistsController', ['$scope', 'Artists', function ($scope, Artists) {

$scope.data = {};

$scope.tagline = 'A';

Artists.query(function (res) {
    $scope.data.artists = res;
    $scope.sortedNames = {A: [], B: [], C: [], D: [], E: [], F: [], G: [], H: [], I: [], J: [] , K: [], L: [], M: [], N: [], O: [], P: [], Q: [], R: [], S: [], T: [], U: [], V: [], W: [], X: [], Y: [], Z: []};
    var sortedNamesProperties = Object.getOwnPropertyNames($scope.sortedNames);

    (function () {
        //loop to go through my artists array
        for(var i = 0; i <= $scope.data.artists.length; i++){
            //loop to go through my sortedNames array
            for(var z = 0; z <= Object.keys($scope.sortedNames).length; z++){
                if($scope.data.artists[i].displayname.charAt(0) == sortedNamesProperties[z]){
                    $scope.sortedNames[sortedNamesProperties[z]].push($scope.data.artists[i]);
                    break;
                }
            }
        }
    })()
});

}]);

Answer 1

Instead of the nested loop, you can address the fields of $scope.sortedNames object as keys in a map:

function () {
    //loop to go through my artists array
    for (var i = 0; i < $scope.data.artists.length; i++) {        
        $scope.sortedNames[$scope.data.artists[i].displayname.charAt(0)].push($scope.data.artists[i]);
    }
}

Somewhat simplified fiddle: http://jsfiddle.net/9xeS8/1/