javascript - 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": {
            ...
        }
    }
}