Can't loop over array in AngularJS template

Question

Running in to a frustrating issue with AngularJS. All I'm trying to do is load a json file and display it in the template using ng:repeat. I've not had any issue with this in the past but for some reason, the code below doesn't work. Can someone take a look and tell me what I'm missing?

If you look at the template:

palette.html

{{palette}}

<div ng-repeat="for color in palette">{{color}}</div>

{{palette}} outputs [{"hex":"#6e4516"},{"hex":"#DDDABE"},{"hex":"#ECEAD9"},{"hex":"#98A349"},{"hex":"#798616"}] however the ng:repeat displays nothing. So the json is being loaded in to the scope but for some reason I can't loop over it.

Here is my main js file:

app.js

var App = angular.module('App', []).
    config(function($routeProvider)
    {
        $routeProvider.
            when('/palette', {templateUrl:'templates/palette.html', controller:PaletteController}).
            otherwise({redirectTo:'/home'})
    });

function PaletteController($scope, $http){
    $http.get('palette.json').success(function(palette){
        $scope.palette = palette;
    });
}

and the data being loaded from the json file:

palette.json

[
    {"hex": "#6e4516"},
    {"hex": "#DDDABE"},
    {"hex": "#ECEAD9"},
    {"hex": "#98A349"},
    {"hex": "#798616"}
]

Ryan O'Neill · Accepted Answer · 2012-12-09 18:22:06Z

5

You're code within the expression section of ng-repeat is incorrect. You need something like this:

<div ng-repeat="color in palette">{{color.hex}}</div>

answered Dec 9, 2012 at 18:22

Ryan O'Neill

3,75724 silver badges27 bronze badges

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

1 Comment

Kylee Over a year ago

That's what I get for working on a python project at the same time. Thanks, it was driving me nuts!

Collectives™ on Stack Overflow

Can't loop over array in AngularJS template

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related