Static Content in a Variable to a JSON Request (Angular/Ionic) - json

Question

I have the following code that has static JSON content (which is working in its current state). Now, I want to call a remote JSON service to get the data instead of static content. I made a fake web service to return the same JSON data: http://appserver.falconinet.com/events.lasso
So here's what I have now. I think I am close...?
angular.module('starter.services', [])
.factory('Events', function ($http) {
var events = [];
return {
all: function () {
return $http.get("http://appserver.falconinet.com/events.lasso");
starter.services.all().then(function successCallback(response) {
$scope.events = data;
})
}
}
return {
all: function () {
return events;
},
remove: function (event) {
events.splice(events.indexOf(event), 1);
},
get: function (eventId) {
for (var i = 0; i < events.length; i++) {
if (events[i].id === parseInt(eventId)) {
return events[i];
}
}
return null;
}
}
})
And here's my controller:
// events
.controller('EventsCtrl', function ($scope, Events) {
$scope.events = Events.all();
console.log($scope.events);
$scope.remove = function (event) {
Events.remove(event);
}
})
.controller('EventDetailCtrl', function ($scope, $stateParams, Events) {
$scope.event = Events.get($stateParams.eventId);
})

Answer 1

Your factory is perfect, just return events when you removed in order to see the modifications :
appModule.factory('Events', function() {
// Might use a resource here that returns a JSON array
// Some fake testing data
var events = [{
id: 0,
title: 'Swing Dance Party',
subtitle: 'Lets Get Dancing!',
when: 'Thursday, Feb 19, 2015 (6:30-9PM)',
picture: 'http://goldsea.com/Text/images/8198.jpg',
desc: 'Dance, dance, dance and enjoy mixed drinks, wine, or 40 beers on tap. Krista Mccart & Steve Davis will be doing a short 30 minute class for first time beginners at 6:30 and the dance starts at 7:00. The dance and lesson are free!!!'
}, {
id: 1,
title: 'St. Patricks Day Party',
subtitle: 'with Special Guest The Menders',
when: 'Saturday, March 14th (9PM)',
picture: 'img/menders.png',
desc: 'Based out of Gastonia, NC, The Menders have been blending influences such as the Beatles, Jack White, The Doors, and Ryan Adams into a folk-laced garage rock sound. Since 2011, they\'ve been honing their craft around NC at venues such as Double Door Inn, The Visulite, The Milestone, Tremont Music Hall, and Snug Harbor. With an upcoming debut self-titled album, lyrics dealing with the complexities of life and death, 4 part harmonies, and energetic live performances, The Menders seek to offer their fans and listeners a music experience that is sure to leave a lasting impression.'
}];
return {
all: function() {
return events;
},
remove: function(event) {
events.splice(events.indexOf(event), 1);
return events;
},
get: function(eventId) {
for (var i = 0; i < events.length; i++) {
if (events[i].id === parseInt(eventId)) {
return events[i];
}
}
return null;
}
}
})
Now create your controller :
appModule.controller('EventsCtrl', ['$scope', 'Events', function($scope, Event) {
var events = Event.all();
console.log('events', events);
var first_event = Event.get(0);
console.log('first_event', first_event);
$scope.remove = function(event) {
console.log(Events.remove(event));
}
}]);

Answer 2

In your case, you need to define a controller and inside of this, inject the Events factory.
In the «all» method: $http.get("http://appserver.falconinet.com/events.lasso"); will return a promise, so in the controller, you need to implement the .then() function, then you can assign the json response data in the $scope.events array.
Something like this:
(function() {
angular.module("starter.services", [])
// Controller
.controller("EventsCtrl", ["$scope", "Events", function($scope, Events) {
$scope.events = [];
Events.all().then(function(response) {
$scope.events = response.data;
});
$scope.remove = function(event) {
$scope.events.splice(event, 1);
}
}
])
// Factory service
.factory("Events", ["$http", function($http) {
return {
all: function() {
return $http.get("http://appserver.falconinet.com/events.lasso");
}
}
}
]);
})();
<html data-ng-app="starter.services">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body data-ng-controller="EventsCtrl">
<div>
<ul>
<li data-ng-repeat="event in events">{{event.title}} Remove
</li>
</ul>
</div>
</body>
</html>

Answer 3

You'll want to use angularjs [$http service]1
return {
all: function() {
return $http.get("http://appserver.falconinet.com/events.lasso");
},
[edit]: Also keep in mind that $http requests will be called asynchronously, so if you are injecting this factory into a controller you'll need bind any variables on success. E.g.:
starter.services.all().then(function successCallback(response) {
$scope.variableName = data;
})
[edit]: In response to your suggested edits, you're missing some of the key differences between where you should be setting scope variables (in the controller) and where your factory is calling. To demonstrate, I made a working plunk with what you're trying to accomplish: http://plnkr.co/edit/IlIPXHMkkw6lo08eZVIk?p=preview
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, Events) {
Events.all().then(function successCallback(response) {
$scope.events = response.data;
});
});
app.factory('Events', function($http) {
return {
all: function() {
return $http.get("http://appserver.falconinet.com/events.lasso");
}
}
});