Angular JS, ionic reading from json

Question

I am building an App using IONIC framework and Angular JS, I am using the Tinder cards feature which ionic have released (http://ionicframework.com/blog/tinder-for-x/). I am trying to read from a JSON File and use this json file as storage for my array. How can i do this, below is my code with a normal array

//Controller for Cards
angular.module('Pinder').controller('CardsCtrl', function($scope, TDCardDelegate) {
console.log('CARDS CTRL');

//Array of Cards - this should 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();
 };
})

This is my code attempting to read from a json file

//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();
 };
 })

When using the json method i get the error CardsCtrl is not a function.

You've got a syntax error. There are two `});` after `//handle error here` when you only need one to close the statements. — Jeremy Wilken, Nov 03 '14 at 15:17
ahh cant believe i didn't see that. Even with the correct syntax it still wont read from my json file — Adam, Nov 03 '14 at 15:45

score 3 · Answer 1 · answered Nov 04 '14 at 14:44

The syntax is incorrect, I sometimes forget myself which to use. $http.get() returns a promise with a success and error methods.

$http.get('../cards.json').success(function(cards){
  console.log(cards);
}).error(function(error) {
  console.log(error);
});

Angular JS, ionic reading from json

1 Answers1