Angular js - a simple loop on a json won't work

Question

Here is my simple code:

in app.js:

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

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

the 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>

i'm just trying listing in html all the json genres names , so for example Alternative, Ambient, Pop, Rock, etc but actually it prints {} instead of the genre Name.

What's happening?

@steo no man really nothing in console :(

Filippo oretti
– Filippo oretti

2014-01-25 18:02:01 +00:00
Commented Jan 25, 2014 at 18:02 — Filippo oretti
– Filippo oretti, Commented Jan 25, 2014 at 18:02

lemonzi · Accepted Answer · 2014-01-25 18:09:45Z

3

Genres is an object, not a array. This means it doen't have a list of elements, but a list of (key, value) pairs. In your case, the keys are the names of the genres and the values are empty objects.

What happens is that ng-repeat iterates by default on the values. So you have several options:

If you only need the genre names, try a JSON array instead:

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

If you need further details, iterate on both keys and values:

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

With a JSON like:

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

edited Jan 25, 2014 at 18:09

answered Jan 25, 2014 at 18:04

lemonzi

4613 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

steo · Accepted Answer · 2014-01-25 18:04:25Z

1

Now that I look at the JSON file it actually prints the right value. If you see, you are using an "object literal" while you should have an array instead

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

At the very moment, the value of every genre is actually { } which is the value that is printed in your HTML.

answered Jan 25, 2014 at 18:04

steo

4,6762 gold badges37 silver badges66 bronze badges

1 Comment

Filippo oretti Over a year ago

ok, but sorry what's wrong here? pastebin.com/GyQEXVGc why jsonlint won't validate it? :/

Collectives™ on Stack Overflow

Angular js - a simple loop on a json won't work

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related