I'm currently developing an App with the IONIC framework and Angular JS, utilizing the Tinder cards feature recently introduced by Ionic (http://ionicframework.com/blog/tinder-for-x/). My goal is to read from a JSON file and use it as storage for my array. How can this be achieved? Below is my code snippet with a standard array:
//Controller for Cards
angular.module('Pinder').controller('CardsCtrl', function($scope, TDCardDelegate) {
console.log('CARDS CTRL');
//Array of Cards - intended to be moved to a service file.
var cardTypes = [
{id: 1, title: "Frank", image: 'img/Frank.png', desc:"This will be card Description", done: false },
{id: 2, title: "John Lewis", image: 'img/JohnLewis.png', desc:"This will be card Description", done: true },
{id: 3, title: "Generali", image: 'img/Generali.png', desc:"This will be card Description", done: true },
];
//Calls CardTypes array into 'cards'
$scope.cards = Array.prototype.slice.call(cardTypes, 0);
$scope.cardDestroyed = function(index) {
$scope.cards.splice(index, 1);
};
//Randomly adds a new card
$scope.addCard = function() {
var newCard = cardTypes[Math.floor(Math.random() * cardTypes.length)];
newCard.id = Math.random();
$scope.cards.push(angular.extend({}, newCard));
}
})
//Controller for swipe interface of the card.
.controller('CardCtrl', function($scope, TDCardDelegate) {
//Card swipe left function
$scope.cardSwipedLeft = function(index) {
console.log('LEFT SWIPE');
$scope.addCard();
};
//Card swipe right function
$scope.cardSwipedRight = function(index) {
console.log('RIGHT SWIPE');
$scope.cards[index].done = true;
$scope.addCard();
};
})
Shown below is my attempt to read from a json file within the code:
//Controller for Cards
angular.module('Pinder').controller('CardsCtrl', function($scope, TDCardDelegate, $http) {
console.log('CARDS CTRL');
$scope.cards = [];
$http.get('../cards.json', function(cardTypes){
//Calls CardTypes array into 'cards'
$scope.cards = Array.prototype.slice.call(cardTypes, 0);
}, function(error) {
//handle error here
});
});
$scope.cardDestroyed = function(index) {
$scope.cards.splice(index, 1);
};
//Randomly adds a new card
$scope.addCard = function() {
var newCard = cardTypes[Math.floor(Math.random() * cardTypes.length)];
newCard.id = Math.random();
$scope.cards.push(angular.extend({}, newCard));
}
})
//Controller for swipe interface of the card.
.controller('CardCtrl', function($scope, TDCardDelegate) {
//Card swipe left function
$scope.cardSwipedLeft = function(index) {
console.log('LEFT SWIPE');
$scope.addCard();
};
//Card swipe right function
$scope.cardSwipedRight = function(index) {
console.log('RIGHT SWIPE');
$scope.cards[index].done = true;
$scope.addCard();
};
})
However, when using the JSON method, I encounter the error message stating "CardsCtrl is not a function".