We Keep Coding

$http.put not updating model

I'm attempting to learn the MEAN stack and learning to use the $http service.
I currently have a global check in place that is suppose to update my Sprints model, which looks like:
var SprintSchema = new Schema({
tasks: [{
type: String,
ref: 'Task'
}],
name: {
type: String
},
start: {
type: Date
},
end: {
type: Date
},
active: Boolean
});
The following controller should update the Sprint model when requested, and when I console.log the variable in my success function, it looks like what I would expect it to pass but it doesn't actually end up updating my model. Below is my code and an example of the console.log.
'use strict';
angular.module('inBucktApp')
.service('VariableService', function () {
// AngularJS will instantiate a singleton by calling "new" on this function
var ticketId = 'noTicketYet';
var ticketAssigneeName = 'noTicketNameYet';
return {
getPropertyId: function () {
return ticketId;
},
getPropertyName: function () {
return ticketAssigneeName;
}
,
setProperty: function(value, valueName) {
ticketId = value;
ticketAssigneeName = valueName;
}
};
})
.run(['$rootScope', '$http', 'socket', 'VariableService', function($rootScope, $http, socket, VariableService) {
$rootScope.sprintStart;
$http.get('/api/sprints').success(function(sprints) {
$rootScope.sprints = sprints.pop();
$rootScope.sprintStart = new Date($rootScope.sprints.start);
$rootScope.sprintEnd = new Date($rootScope.sprints.end);
socket.syncUpdates('sprints', $rootScope.sprints);
$http.get('/api/tasks').success(function(task) {
$rootScope.task = task;
$rootScope.taskPop = _.flatten($rootScope.task);
$rootScope.taskPopAgain = $rootScope.task.pop();
socket.syncUpdates('task', $rootScope.task);
$rootScope.updateTicket = function(){
//Goes through the entire array and check each element based on critera.
var taskIdsToAdd = [];
for(var i = 0; i < $rootScope.taskPop.length; i++){
var taskFind = $rootScope.taskPop[i];
//Logic if ticket is not in the sprint
if ((new Date(taskFind.start) >= $rootScope.sprintStart) && (new Date(taskFind.start) <= $rootScope.sprintEnd)){
taskFind.sprint = true;
taskIdsToAdd.push(taskFind._id);
$rootScope.sprints.tasks.push(taskFind._id);
$http.put("/api/tasks/"+taskFind._id,taskFind).success(function(task){
console.log('Logic 1 Ran!');
console.log($rootScope.sprintStart);
// socket.syncUpdates('taskPopAgain', taskFindPopAgain);
});
$http.put("/api/sprints/"+$rootScope.sprints._id,$rootScope.sprints).success(function(sprints){
console.log('Logic 2 Ran!');
console.log($rootScope.sprintStart);
console.log(sprints)
});
console.log($rootScope.sprints);
} else{
console.log('this doesnt work first');
};
//Logic if ticket is not in the sprint
if (new Date(taskFind.start) < $rootScope.sprintStart || new Date(taskFind.start) > $rootScope.sprintEnd){
taskFind.sprint = false;
$http.put("/api/tasks/"+taskFind._id,taskFind).success(function(task){
console.log(task);
});
}else{
console.log('this doesnt work');
};
}
};
$rootScope.updateTicket();
});
});
}]);
Console.Log of console.log(sprints)
Anyone have any idea what I'm doing incorrect here?
Thanks for the help guys.

Strange ng-repeat behaviour with local storage

I am just playing around with ionic and local storage. I am messing with the ionic example app to customise it a bit and I am running into a snag. Basically the home page lists items. Once the user goes into the item they can add to a task list.
To create an item on the home page the user opens a modal and enters info (title,date, etc...) and then stores the items in local storage. The item array has a nested array for the task list.
once the user goes into an item they can open a modal that adds a task. Once submitted the task is pushed to the nested array which works great and outputs:
However, when the user goes back to the home page where all items are listed there are just a number of empty objects repeated (looking in local storage the object is perfect).
My list controller and inner list controller:
.controller('ProfileCtrl', function ($filter, $scope, $stateParams, $timeout, $ionicModal, Eventers) {
var createEventer = function(eventerId, eventerTitle, eventerVenue, eventerDay, eventerMonth, eventerYear, eventerDate) {
var newEventer = Eventers.newEventer(eventerId,eventerTitle, eventerVenue, eventerDay, eventerMonth, eventerYear, eventerDate);
$scope.eventers.push(newEventer);
Eventers.save($scope.eventers);
}
$scope.eventers = Eventers.all();
$ionicModal.fromTemplateUrl('new-event.html', function(modal) {
$scope.eventerModal = modal;
},
{
focusFirstInput: false,
scope: $scope
});
////////////////////////////////
$scope.date = new Date();
console.log($scope.date);
////////////////////////////////
$scope.createEventer = function(eventer, index) {
var eventerId = localStorage.clickcount;
var eventerTitle = eventer.title;
var eventerVenue = eventer.venue;
var eventerDay = eventer.day;
var eventerMonth = eventer.month;
var eventerYear = eventer.year;
var eventerDate = $scope.date;
if (eventerId,eventerTitle, eventerVenue, eventerDay, eventerMonth, eventerYear, eventerDate) {
createEventer(eventerId,eventerTitle, eventerVenue, eventerDay, eventerMonth, eventerYear, eventerDate);
$scope.eventerModal.hide();
eventer.title = "";
eventer.venue = "";
eventer.day = "";
eventer.month = "";
eventer.year = "";
}
console.log(eventer);
};
})
and my inner controller:
.controller('ProfileInnerCtrl', function ($scope, $stateParams,$ionicModal, $timeout, Eventers) {
$scope.eventer = Eventers.get($stateParams.eventerId);
$ionicModal.fromTemplateUrl('new-task.html', function(modal) {
$scope.eventerModal = modal;
},
{
focusFirstInput: false,
scope: $scope
});
$scope.createTask = function(task) {
$scope.eventer.tasks.push({
title: task.title
});
console.log(task.title);
Eventers.save($scope.eventer);
task.title = "";
$scope.eventerModal.hide();
};
$scope.newTask = function() {
$scope.eventerModal.show();
};
$scope.closeNewTask = function() {
$scope.eventerModal.hide();
}
$scope.completionChanged = function() {
Eventers.save($scope.eventers);
};
})
--------EDIT: Add Factory-------
.factory('Eventers', function() {
/**/
return {
all: function() {
var eventerString = window.localStorage['eventers'];
if (eventerString) {
return angular.fromJson(eventerString);
}
return [];
},
save: function(eventers) {
window.localStorage['eventers'] = angular.toJson(eventers);
},
newEventer: function(eventerId, eventerTitle,eventerVenue , eventerDay, eventerMonth, eventerYear, eventerDate) {
return {
id: eventerId,
title: eventerTitle,
venue: eventerVenue,
day: eventerDay,
month: eventerMonth,
year: eventerYear,
date: eventerDate,
tasks: []
};
},
get: function(eventerId){
var hell = window.localStorage['eventers'];
var eventers = JSON.parse(hell);
for (var i = 0; i < eventers.length; i++) {
if (parseInt(eventers[i].id) === parseInt(eventerId)){
console.log(eventerId);
return eventers[i];
}
}
return null;
}
}
});
Added images: the first 2 show the home page and local storage before added a task. the last 2 show local storage after adding task and the home page

Well, when you create a new task you save $scope.eventer in the localStorage, which only has titles in it.
Why not push the whole task object in the $scope.eventer?
$scope.createTask = function(task) {
$scope.eventer.tasks.push(task);
...
EDIT:
Your eventers in localStorage after adding task are not an array, so the ng-repeat takes each key in the object.
try Eventers.save([$scope.eventer]); for test, but you'lll have to rethink the whole proccess, what when you have more than one object in the array? you will lose the old ones this way

Pull to refresh data duplication

I am creating an Ionic application that is pulling articles from a joomla K2 website. I am using $http and just ending my url off with '?format=json' and that is working perfectly. However the website I am pulling data from updates its articles every few minutes so I need a way for the user to be able to refresh the page. I have implemented Ionics pull to refresh and it is working swell except for the fact that instead of just pulling in new articles it just appends all the articles to my array. Is there anyway to just maybe iterate over current articles timestamps or IDs (I am caching articles in localStorage) to just bring in new articles? My factory looks like this:
.factory('Articles', function ($http) {
var articles = [];
storageKey = "articles";
function _getCache() {
var cache = localStorage.getItem(storageKey );
if (cache)
articles = angular.fromJson(cache);
}
return {
all: function () {
return $http.get("http://jsonp.afeld.me/?url=http://mexamplesite.com/index.php?format=json").then(function (response) {
articles = response.data.items;
console.log(response.data.items);
return articles;
});
},
getNew: function () {
return $http.get("http://jsonp.afeld.me/?url=http://mexamplesite.com/index.php?format=json").then(function (response) {
articles = response.data.items;
return articles;
});
},
get: function (articleId) {
if (!articles.length)
_getCache();
for (var i = 0; i < articles.length; i++) {
if (parseInt(articles[i].id) === parseInt(articleId)) {
return articles[i];
}
}
return null;
}
}
});
and my controller:
.controller('GautengCtrl', function ($scope, $stateParams, $timeout, Articles) {
$scope.articles = [];
Articles.all().then(function(data){
$scope.articles = data;
window.localStorage.setItem("articles", JSON.stringify(data));
},
function(err) {
if(window.localStorage.getItem("articles") !== undefined) {
$scope.articles = JSON.parse(window.localStorage.getItem("articles"));
}
}
);
$scope.doRefresh = function() {
Articles.getNew().then(function(articles){
$scope.articles = articles.concat($scope.articles);
$scope.$broadcast('scroll.refreshComplete');
});
};
})

Use underscore.js to simple filtering functionality.
For example:
get all id's of already loaded items (I believe there is some unique fields like id)
http://underscorejs.org/#pluck
var loadedIds = _.pluck($scope.articles, 'id');
Reject all items, if item.id is already in loadedIds list.
http://underscorejs.org/#reject
http://underscorejs.org/#contains
var newItems = _.reject(articles, function(item){
return _.contains(loadedIds, item.id);
});
Join new items and existings:
$scope.articles = newItems.concat($scope.articles);
or
http://underscorejs.org/#union
$scope.articles = _.union(newItems, $scope.articles);
Actually _.union() can manage and remove duplicates, but I would go for manual filtering using item.id.

AngularJS SPA using API and Mongoose

I am creating a simple AngularJS SPA using an API to load data into Mongoose.
My app just adds, displays and edits a list of members. It works when I just store the members in an array in my factory service but now I want to change it to hook up to Mongoose via an API.
Factory
app.factory('SimpleFactory', ['$http', function($http){
var factory = {};
var members = $http.get('/api/members')
factory.getMembers = function ()
{
return members = $http.get('/api/members');
}
factory.getMember = function (index) {
if (index >=0 && index < members.length ) {
return members[index] = $http.get('/api/members/' + member_id )
}
return undefined
}
factory.addMember = function(member) {
return $http.post('/api/members',member)
}
factory.updateMember = function(index,member) {
$http.put('/api/members/' + member_id, member)
}
return factory;
}])
Controller
app.controller('MembersController', ['$scope','SimpleFactory',
function ($scope,SimpleFactory) {
SimpleFactory.getMembers()
.success(function(members) {
$scope.members = members;
});
$scope.addMember = function()
{
var member = {
name: $scope.newMember.name,
address: $scope.newMember.address,
age : $scope.newMember.age,
level : $scope.newMember.level,
swimmer : $scope.newMember.swimmer,
email : $scope.newMember.email,
regdate : $scope.newMember.regdate,
}
SimpleFactory.addMember(member)
.success(function(added_member)
{
$scope.members.push(added_member);
$scope.newMember = { }
} );
}
}])
But I am not sure how to change my controller for updating a member, it is coded as follows to pick up the members from an array in my factory setting, how do I code it to pick up members from Mongoose via API:
app.controller('MemberDetailController', ['$scope', '$location', '$routeParams', 'SimpleFactory',
function($scope, $location, $routeParams, SimpleFactory) {
$scope.member = {
index: $routeParams.member_index,
detail: SimpleFactory.getMember($routeParams.member_index)
}
$scope.updateMember = function() {
SimpleFactory.updateMember($scope.member.index,
$scope.member.detail)
$location.path('/members')
}
}
])
Can anyone help, its not a complicated app but I'm only learning and I am stuck here!
Thanks

You $scope.member object should set after getMember promise success.
Code
SimpleFactory.getMember($routeParams.member_index).then(function(data){
$scope.member = {
index : $routeParams.member_index,
detail : data.user
};
});
Apart from that you need to make sure getMember method should always return a promise while index is 0
factory.getMember = function (index) {
var deferred = $q.defer();
if (index >=0 && index < members.length ) {
return members[index] = $http.get('/api/members/' + member_id )
}
deferred.resolve;
}
Update
For calling update method you need to do change service first which would return a promise
factory.updateMember = function(index,member) {
return $http.put('/api/members/' + member_id, member)
}
Then call factory.updateMember resolve that promise and then do $location.path
$scope.updateMember = function() {
SimpleFactory.updateMember($scope.member.index, $scope.member.detail)
.then(function(data) {
$location.path('/members')
});
};

How can I check whether array of objects is empty or not?

var app = angular.module('app',['ui.bootstrap']);
app.controller("ListCtrl", function ($scope, $http) {
$scope.submit = function () {
$scope.loading = true;
$scope.error = false;
$http.get('http://www.omdbapi.com/?s=' + $scope.search + '&r=json')
.then(function (res) {
var titles = [];
angular.forEach(res.data.Search, function(item){
$http.get('http://www.omdbapi.com/?t=' + item.Title + '&y=&plot=full&r=json').then(function(res){
if (res.data.Poster === "N/A") {
res.data.Poster = "http://placehold.it/350x450/FF6F59/FFFFFF&text=Image+not+Available!!";
}
titles.push(res.data);
});
});
$scope.movie = titles;
$scope.results = true;
$scope.error = false;
$scope.loading = false;
if (titles.length==0) { // not working
$scope.results = false;
$scope.error = true;
}
})
I have been tried several things like :
Object.getOwnPropertyNames(titles).length === 0)
obj == null
None of them seems to work...

This is happening because of incorrect scope:
var titles = []; is defined inside the .then
and you are checking the length outside of .then
since titles is not available outside .then it would not work. (undefined.length==0)
Solution:
.then(function (res) {
var titles = [];
angular.forEach(res.data.Search, function(item){
$http.get('http://www.omdbapi.com/?t=' + item.Title + '&y=&plot=full&r=json').then(function(res){
if (res.data.Poster === "N/A") {
res.data.Poster = "http://placehold.it/350x450/FF6F59/FFFFFF&text=Image+not+Available!!";
}
titles.push(res.data);
});
$scope.movie = titles;
$scope.results = true;
$scope.error = false;
$scope.loading = false;
if (titles.length==0) { // now this will work
$scope.results = false;
$scope.error = true;
}
});//titles will not be available after this.

$http.get() is async so the statement if (titles.length==0) { gets executed right away.
Have a counter to determine when all the Promises get resolved and then perform the check. Move the if statement inside the callback.
var count = res.data.Search.length;
angular.forEach(res.data.Search, function(item){
$http.get('http://www.o....rest of code').then(function(res) {
// rest of code
titles.push(res.data);
if (!count-- && !titles.length) {
$scope.results = false;
$scope.error = true;
}
}
});
});

In your case, the check
titles.length
will be executed before the
titles.push
because you use an asynchronous request which will return later.
You need to wrap your statements into the answer-block of the request.

Just as an aside, but beneficial for my practice and your future help:
Part of the problem you were having was scope-management (JS-scope, not Angular $scope), part of it was concurrency-management, and part of it appeared to be plain old scope-formatting making it hard to see where all control blocks start and end (that gets miserable when it's not just if/else, but with callbacks/promises, too).
This is a small example of how you might consider tackling these problems, through a quick refactor of your issues:
function pluck (key) {
return function pluckFrom(obj) { return obj[key]; };
}
angular.module("app", ["ui.bootstrap"]);
angular.moule("app").service("omdbService", ["$http", function ($http) {
function getSearch (search) {
var searching = $http.get("http://www.omdbapi.com/?s=" + search + "&r=json")
.then(pluck("data"));
return searching;
}
function getMovie (title) {
var searching = $http.get("http://www.omdbapi.com/?t=" + title + "&y=&plot=full&r=json")
.then(pluck("data"));
return searching;
}
return {
getSearch: getSearch,
getMovie: getMovie,
getPlaceholderPoster: function () { return "http://placehold.it/350x450/FF6F59/FFFFFF&text=Image+not+Available!!"; }
};
}]);
angular.moule("app").controller("ListCtrl", ["$scope", "$q", "omdbService", function ($scope, $q, omdb) {
function loadMovie (movie) {
return omdb.getMovie(movie.Title)["catch"](function () { return undefined; });
}
function movieExists (movie) { return !!movie; }
function updatePoster (movie) {
movie.Poster = movie.Poster || omdb.getPlaceholderPoster();
return movie;
}
function setResults (movies) {
$scope.movie = movies; // $scope.movies, instead?
$scope.results = true;
$scope.error = false;
$scope.loading = false;
}
function handleError () {
$scope.results = false;
$scope.error = true;
}
$scope.submit = function () {
$scope.loading = true;
$scope.error = false;
omdb.getSearch($scope.search)
.then(pluck("Search"))
.then(function (movies) { return $q.all(movies.map(loadMovie)); })
.then(function (movies) { return movies.filter(movieExists).map(updatePoster); })
.then(setResults, handleError);
};
}]);
There are 8000 valid ways of handling this, and everyone will see it a little differently.
This is also not really how I'd tackle it in production, but not too far off...
Moving all endpoint-calls out to a service which is responsible for those means that any controller in your system (with that module as a dependency) can access them.
Doing small things per function and letting Array.prototype methods do the iterating (IE8 can be shimmed if needed) means that each function is super-specific.
By wrapping the controller/service functions in arrays, and naming their dependencies, they're now minification friendly.
The body of submit() is less than 10 lines, and deals with all kinds of crazy async stuff, but I know that I've handled errors like one of the movies returning a 404 (my code should still fire, with the remaining movies, the code of others might not -- most code would either never trigger success or would fail all the way through the program, if the server threw an error for a movie).
Now, I'm not checking that the server is sending the right kind of data for a "movie", but that's different.