AngularJS - Weird error with sending and deleting JSON data from cache in while loop? - json

Question

The loop is behaving strange where the alerts are firing out of order and the JSON data is being sent all at the same exact time. I do not understand why this is happening at all. I have been struggling with this for too long now and any help would be insanely appreciated!
Submitting with 3 cached JSON objects, the sequence goes:
Alert "should be second"
Alert "should be second"
Alert "should be second"
Alert "{#xmlns:ns3":"url}"
Alert "should be first"
Alert "0posted"
Then successfully sends all three JSON objects to the database at the same time.
The cachePostCount is now set to zero
app.controller('FormCtrl', function($scope, $filter, $window, getData, Post, randomString) {
// Get all posts
$scope.posts = Post.query();
// Our form data for creating a new post with ng-model
$scope.postData = {};
$scope.$on('updateImage', function () {
$scope.postData.attachment = getData.image;
});
$scope.postData.userid = "Mango Farmer";
$scope.postData.uuid = randomString(32); //$scope.genUUID();
$scope.$on('updateGPS', function () {
$scope.postData.gps = getData.gps;
});
$scope.postData.devicedate = $filter('date')(new Date(),'yyyy-MM-dd HH:mm:ss');
$scope.newPost = function() {
var post = new Post($scope.postData);
var postCount = window.localStorage.getItem("cachedPostCount");
if(typeof postCount == 'undefined' || postCount == null){
postCount = 1;
window.localStorage.setItem("cachedPostCount", postCount);
}
else {
postCount ++;
window.localStorage.setItem("cachedPostCount", postCount);
}
window.localStorage.setItem("post" + postCount, JSON.stringify(post));
while (postCount > 0) {
var curCacheObj = new Post(JSON.parse(window.localStorage.getItem("post" + postCount) || '{}'));
curCacheObj.$save().then(function(response) {
var servResponse = JSON.stringify(response);
alert(servResponse);
if (servResponse.indexOf("#xmlns:ns3") > -1) {
alert("should be first");
window.localStorage.removeItem("post" + postCount);
alert(window.localStorage.getItem("cachedPostCount") + "posted");
$window.location.href = 'success.html';
}
else {
alert("Unable to post at this time!");
}
});
alert("should be second");
postCount --;
window.localStorage.setItem("cachedPostCount", postCount);
}
};

Answer 1

$save() is an asynchronous operation and is guaranteed to not happen until after the next tick in the event loop, which will occur after alert("should be second"); occurs. You should place this alert (and any other logic) that relies on that ordering inside the then() function or chain on another then() function and put it in there instead, like so:
curCacheObj.$save().then(function(response) {
var servResponse = JSON.stringify(response);
alert(servResponse);
if (servResponse.indexOf("#xmlns:ns3") > -1) {
alert("should be first");
window.localStorage.removeItem("post" + postCount);
alert(window.localStorage.getItem("cachedPostCount") + "posted");
$window.location.href = 'success.html';
}
else {
alert("Unable to post at this time!");
}
}).then(function() {
alert("should be second");
postCount --;
window.localStorage.setItem("cachedPostCount", postCount);
});

Answer 2

The problem was that .$save() does not like while loops (maybe because it is an asynchronous function as mentioned previously). I recreated the effect of a while loop with a function using an if statement that will fire the function again if the cached postCount still has data as follows:
$scope.submitAndClearCache = function() {
var postCount = window.localStorage.getItem("localPostCount");
var curCacheObj = new Post(JSON.parse(window.localStorage.getItem("post" + postCount) || '{}'));
if (postCount != 0) {
curCacheObj.$save().then(function(response) {
alert(response);
alert("Post " + postCount + " sent!");
}).then(function() {
postCount --;
window.localStorage.setItem("localPostCount", postCount);
postCount = window.localStorage.getItem("localPostCount");
$scope.submitAndClearCache();
});
}
};
$scope.addCachePost = function() {
var frmData = new Post($scope.postData);
var postCount = window.localStorage.getItem("localPostCount");
postCount ++;
window.localStorage.setItem("localPostCount", postCount);
window.localStorage.setItem("post" + postCount, JSON.stringify(frmData));
};
This technique works, it just seems weird.