Construct new array based on lastChangedDate

Question

I have a refreshdata() function which executes a call to get IDs of certain events:

function refreshdata()
{
    $http({
        url: “…/GetIDs”,
        method: "POST",
        data: jsonData,
        dataType: "json",
        timeout: 7000,
        contentType: 'application/json; charset=utf-8'
    }).success(function(data, status, headers, config) {
            responseNew=data.d;
            meetings = JSON.parse(responseNew);
            console.log("Got meetings");
            meetingsanddetails(meetings);

        }).error(function(data, status, headers, config) {
            alert("Unable to refresh data.”);
        });
}

meetings is something like:

{
   "Result":"success",
   "Key":"12345",
   "Data":[
     {"ID":"GFDCV34","lastChangedDate":"2015-12-03 11:14:27"},
     {"ID":"IDJHE23","lastChangedDate":"2015-12-03 15:17:47"},
     {"ID":"KDJBD34","lastChangedDate":"2015-12-03 05:25:11"}
   ]
}

Next, I do meetingsanddetails(meetings):

res = meetings;
var i = 0;
var tmp = [];
promises = [];
res.Data.map(function (val) {
    promises.push(getdetails2(val.ID).then(function (data) {
        tmp = JSON.parse(data);
        Object.keys(tmp.Data[0]).map(function (v, j) {
            val[v] = tmp.Data[0][v];
        });
    }, function (error) {
        console.log(error)
    }));
});
$q.all(promises).then(function () {
    $timeout(function () {$ionicLoading.hide()}, 500);
    $window.localStorage['data'] = JSON.stringify(res);
});

res is now something like:

{
  "Result": "success",
  "Key": "12345",
  "Data":[
    {
     "ID": "GFDCV34",
     "name": "Name of event 1",
     "date": "date of event 1",
     "location": "location of event 1",
     "lastChangedDate": "2015-12-03 11:14:27"
    },
    {
      "ID": "IDJHE23",
      "name": "Name of event 2",
      "date": "date of event 2",
      "location": "location of event 2",
      "lastChangedDate": "2015-12-03 15:17:47"
    },
    {
      "ID": "KDJBD34",
      "name": "Name of event 3",
      "date": "date of event 3",
      "location": "location of event 3",
      "lastChangedDate":"2015-12-03 05:25:11"
    }
  ]
}

(credit to maurycy)

(Info: getdetails2(id) returns the details of an event with a given ID).

This works fine, but the getdetails2 calls take a long time to load. That is way I would like to make it work like this: If …/GetIDs returns IDs that weren’t already in $window.localStorage['data'], they should be added with their details. The IDs that …/GetIDs returns that were already in $window.localStorage['data’], should only be updated if the lastChangedDate of the new call is more recent. IDs that are present in $window.localStorage['data’], but not in the new call, should be deleted.

Anyone who can point me in the right direction? I keep messing up this array hocus pocus.

Answer 1

First of all, don't rely on localStorage: in private mode in Safari it does not work, so you need to have some fallback to prevent errors.

What you want to achieve is a caching thing. You have two possibilities: do it on your own which would take some time and probably will have some bugs (I did it couple of times and it was not fun at all) or use ready solutions, e.g. this advanced angular-cache. It allows to choose the storage type, can be natively used with $http / $resource and allows operations with the cache such as deleting cached responses (that's what you would need to do when you get a newer timestamp). It is quite easy to use, just check the docs and examples.