0

I am creating a Card game and loading all cards from json file, as i found it easier. I am loading json in normal way in angular as follow

Script

app.controller('CardsController', function($scope, $http)
{
    $http.get("Card.json").success(function(response){
        $scope.Cards = response;
    }).error(function(data, status, headers, config) {
        console.log('error loading json');
    });

    $scope.random = function() {
        return 0.5 - Math.random();
    }
});

and i am iterating this json result in a div as follow

html

<div id="leftSideHolder">
    <div ng-repeat="card in Cards | orderBy:random | limitTo:20">
        <div style="position:absolute;">
            <img src='images\{{card.image}}.{{card.imagetype1}}' width="154px" height="232px"/>
        </div>
    </div>
</div>

But i am getting a error from Angular. Error Link from Angular. No idea what is this error :( i think its array initializing issue.

I tried that solution as below

var cardList = null;
$http.get("data/Cards.json").success(function(response){
        cardList = response;
    }).error(function(data, status, headers, config) {
        console.log('error loading json');
    });

    $scope.Cards = function() {
       return cardList;
    }

and in html i used Cards() as follow

<div ng-repeat="card in Cards() | orderBy:random | limitTo:20">
    <div style="position:absolute;">
        <img src='images\{{card.image}}.{{card.imagetype1}}' width="154px" height="232px"/>
    </div>
</div>

But still same issue. I tried to remove random also in ng-repeat, and this error goes. But i need to randomize the array also.

My code is in below link as well.

http://plnkr.co/edit/cQMXfVJFMhr3t1OG5G97?p=preview

VarunJi
  • 685
  • 2
  • 14
  • 31

0 Answers0