Search code examples
angularjsangularjs-ng-repeatangularjs-routing

Applying ng-repeat on array of objects displays [Object object]


I have a controller that looks like this:

var PlayersController = function($scope, $http) {
    $http.get('/Players/Index').success(function (data) {
        console.log(data);
        $scope.players = data;
    });
}

PlayersController.$inject = ['$scope','$http'];

My routing looks like this:

var KorpenApp = angular.module('KorpenApp', ['ngRoute']);

KorpenApp.controller('HomeController', HomeController);
KorpenApp.controller('PlayersController', PlayersController);

var configFunction = function($routeProvider) {
    $routeProvider
        .when('/Players', { templateUrl: 'Players/Index', controller: PlayersController })
    .otherwise({redirectTo: '/'});
}

configFunction.$inject = ['$routeProvider'];
KorpenApp.config(configFunction);

My view (Players/Index) looks like this:

<p>TEST</p>
<p>{{players.length}}</p>
<ul ng-repeat="player in players">
    <li ng-repeat="prop in player">
        {{prop}}
    </li>
</ul>

The console log in the player controller logs an array with 5 objects, as it should. These object contains a number of properties that I'm trying to display. However, my view only displays:

[object Object],[object Object],[object Object],[object Object],[object Object]

It seems everything in the view is ignored, so obviously I'm doing something wrong. I would've thought atleast the paragraph containing "TEST" would display even if there was something wrong with the players array. So my two questions are:

  1. Why does my view show "[object Object],[object Object],[object Object],[object Object],[object Object]" ?
  2. Why doesn't the stuff I've put in Players/Index show?

Solution

    1. Because that's how objects are printed. If you want the json representation of this object, use

      console.log(angular.toJson(data));
      
    2. Hard to tell. Maybe the view is not actually at this URL. Look at the Network tab of your browser dev tools, and see what is returned.