Angular js - json 上的简单循环不起作用

Question

这是我的简单代码：

在app.js:

$http.get($rootScope.config.app_ws+'jsons/json.json').success(function(response) {
            $rootScope.config.app_genres =  response;
        });

json.json:

{ 
    "genres":{  

                "Ambient":{},
                "Alternative":{},
                "Blues":{},
                "Chillout":{},
                "Classical":{},
                "Country":{},
                "Dance":{},
                "Dubstep":{},
                "Electronic":{},
                "Folk":{},
                "Grunge":{},
                "Hip Hop":{},
                "House":{},
                "Indie":{},
                "Jazz":{},
                "Latin":{},
                "Metal":{},
                "Opera":{},
                "Pop":{},
                "Punk":{},
                "R&B":{},
                "Reggae":{},
                "Rock":{},
                "Ska":{},
                "Soul":{},
                "Vocal":{},
                "Funk":{},
                "Lounge":{},
                "Geek":{}
    }
}

HTML:

<div ng-repeat="i in config.app_genres.genres">
<span class="span3x3" ng-if="$first"><a href="">Others</a></span>
<span class="span3x3"><a href="">{{i}}</a></span>
<div class="row-fluid" ng-if="($index%3) == 1"></div>

我只是尝试在 html 中列出所有 json 流派名称，例如 Alternative、Ambient、Pop、Rock 等，但实际上它打印的是 {} 而不是流派名称。

发生了什么事？

Answer 1

Genres 是一个对象，而不是一个数组。这意味着它没有元素列表，而是（键，值）对的列表。在您的情况下，键是流派的名称，值是空对象。

默认情况下ng-repeat 会迭代这些值。所以你有几个选择：

如果您只需要流派名称，请尝试使用 JSON 数组：

{
    "Genres": [
        "Pop",
        "Rock",
        ...
        "Jazz"
    ]
}

如果您需要更多详细信息，请在键和值上进行迭代：

<div ng-repeat="(genre, details) in config.app_genres.genres">

使用 JSON 格式：

{
    "Genres": {
        "Jazz": {
            "songs": 50
        },
        "Pop": {
            ...
        }
    }
}

Answer 2

现在我查看了JSON 文件，它实际上打印了正确的值。 如果您看到，您使用的是“object literal”，而您应该使用 array

"Genres": ["Ambient", "Alternative", .., "Jazz"]

目前，每个流派的值实际上是{ }，也就是打印在HTML中的值。