AngularJS: Add element depending on timestamp - angularjs

Question

I am creating a simple list of messages similar to "Whatsapp". I want to include small blurb saying today, yesterday etc.
JSON format:
{
"id":"2",
"chat_id":"2",
"msg":"sample message 1",
"timestamp":1404803173
}
HTML:
<ul>
<li class="time"><span>Today/Yesterday/2DaysAgo</span></li>
<li ng-repeat="result in results">{{result.msg}}<small>{{result.timestamp*1000 | date:'medium'}}</small></li>
</ul>
I want to show the first <li> (class="time") only once for the day (not for all message). Is there any better way I can do this?

Answer 1

Do you have a server side? If yes, the best way to do this would be to:
Show the "time" li upon first load every new day.
set a flag on the server side to "true" once the li is loaded
Set the flag to false at 0000 hrs every night (or at first load every morning).
Check upon every load if the flag was set to true that day already.
Not sure if this can be done purely from client side. One way thats worth a show would be to set the flag in LocalStorage once every day (append the date maybe? ) and check this flag upon each load..

Answer 2

IMHO the best approach would be to sort messages by time then to split them by day and as output repeat days and messages in days, with other approaches it can be really overcomplicated and not worth the time

Answer 3

Considering that this JSON is coming from a Service and it is an array:
var json=[
{
"id":"1",
"chat_id":"2",
"msg":"sample message 1",
"timestamp":1404803173
},
{
"id":"2",
"chat_id":"2",
"msg":"sample message 2",
"timestamp":1404803174
},
...]
then you could create a new object on your controller looping through the items from your JSON and adding a unique key value for all the days, so you can filter it e.g.: the dates without "/"
$scope.json = Service.json;
$scope.dates = [];
$scope.messages = [];
for(i=0; i<$scope.json.length; i++){
var d = new Date($scope.json[i].timestamp*1000);
var index = String(d.getDate()) + String((d.getMonth()+1)) + String(d.getFullYear());
var obj = {id: index, data: $scope.json[i]};
$scope.messages.push(obj);
if($scope.dates.indexOf(index) == -1) $scope.dates.push(index);
}
Then, on your view:
<ul ng-repeat="date in dates">
<li class="time"><span>{{date | someFilterToGetDayFromDate}}</span></li>
<li ng-repeat="message in messages | filter:{'id': date}:true">{{message.msg}}<small>{{message.timestamp*1000 | date:'medium'}}</small></li>
</ul>
I didn't test the code, but hopefully you will get the idea of what to do here.
If it is not clear, let me know and I will try to explain further.