在jquery移动列表视图中格式化json内容

Question

Am creating an application in jquery mobile which the final output should be similar to this:

The raw html code that produces that image is

        <ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Today, May 1, 2016 <span class="ui-li-count">2</span></li>
      <li><a href="#">
        <h3>Reply</h3>
        <p>20,00 we do have discounts for earlier payers </p>


        <p class="ui-li-aside">10 mins ago</p>
      </a></li>
      <li><a href="#">
        <h4>Me</h4>
        <p>How much is the current fee per semester? Do you accet credit cards</p>
        <p class="ui-li-aside">25 mins ago</p>
      </a></li>
      <li data-role="list-divider">Yesterday, April 30, 2016 <span class="ui-li-count">1</span></li>
      <li><a href="#">
        <h3>Reply</h3>
        <p>Hello, How can i help you?</p>
        <p class="ui-li-aside">10:15 pm</p>
      </a></li>
        <li data-role="list-divider">Friday, April 29, 2016 <span class="ui-li-count">1</span></li>
      <li><a href="#">
        <h3>Me</h3>
        <p>Hello</p>
        <p class="ui-li-aside">10:15 pm</p>
      </a></li>
     </ul>

In my project am using json to fetch data from the database and show it to the user in a listview like above.

Code to fetch data from the database:

  var id_from = localStorage.loggedin_id;
  var id_to_send = localStorage.user_schoolls_head;
 $.getJSON("http://127.0.0.1/tum_old/custom/php/message.php",  
{id_from:id_from,id_to_send:id_to_send},
function(response){
console.log(response); 
});

After the console.log(response) i get the javascript object as:

A from the picture with the list a me situation is like the one for from_id and then to_id (example 1:4) while a reply is the vice versa. How can i format the time to display :

Today, yeasterday...from hence(on) it will display the dats on the list dividers
Time to show 10mins ago, 20mins ago, but beyond 1 hour it shows the actual time (eg: 10:15pm)
How to also sort these messages according to dates so that 
the earliest is seen first in the today area.. 

ie: IT SHOULD APPEAR LIKE THE FIRST IMAGE

MY DATABASE RECORD:

Answer 1

To format dates you can use momentjs ( http://momentjs.com ). Sorting can be achieved simply by adding ORDER BY time_sent DESC in your sql query

Answer 2

Check out this fiddle .

It would be very unwise to sort your objects using javascript. Like Zoran said, you should do that in your query using ORDER BY time_sent DESC .

Update Not sure what you mean by divider based on date but I've updated the jsfiddle to output exactly how the date is formatted in your example. Hope it helps.