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

【问题标题】：Formatting json content in jquery mobile list view在 jquery 移动列表视图中格式化 json 内容
【发布时间】：2016-05-01 10:41:41
【问题描述】：

我正在 jquery mobile 中创建一个应用程序，其最终输出应类似于以下内容：

生成该图像的原始 html 代码是

        <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>

在我的项目中，我使用 json 从数据库中获取数据并在上面的列表视图中显示给用户。

从数据库中获取数据的代码：

  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); 
});

在 console.log(response) 之后，我得到的 javascript 对象为：

带有列表的图片中的我的情况类似于 from_id 然后 to_id 的情况（例如 1:4），而回复则反之亦然。如何格式化显示时间：

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：它应该像第一张图片一样

我的数据库记录：

【问题讨论】：

看看这个小提琴：jsfiddle.net/ta793zx2/47 这（几乎）是你要找的吗？
快到了，但是如何根据日期添加列表分隔符
您可以对照数组检查日期。如果不存在，则生成分隔符 HTML 代码并将日期推送到数组。
你有一个关于如何在数组中精确推送日期的示例（你的意思）
请不要编辑您的帖子，以免其他答案无效。而是提出一个新问题。

标签： javascript jquery json jquery-mobile

【解决方案1】：

查看this fiddle。

使用 javascript 对对象进行排序是非常不明智的。正如 Zoran 所说，您应该在查询中使用 ORDER BY time_sent DESC。

更新不确定 divider based on date 是什么意思，但我已经更新了 jsfiddle 以准确输出示例中日期的格式。希望对您有所帮助。

【讨论】：

基于日期的列表分隔符怎么样

【解决方案2】：

要格式化日期，您可以使用 momentjs (http://momentjs.com)。排序可以通过在你的sql查询中添加ORDER BY time_sent DESC来实现

【讨论】：