【问题标题】:Firebase WEB , Group By child records by Date ,Month ,YearFirebase WEB,按日期、月份、年份分组按子记录
【发布时间】:2016-11-15 13:50:39
【问题描述】:

我有节点 'messages' ,它将有多个带有时间戳的记录。我需要按日期、月份、年份按记录分组,如下所示

12 July, 2016
13 July, 2016
14 July, 2016
.....

我的记录看起来像

{
  "messages" : {
    "233110" : {
      "-KMU3Tfp7Sk8DzT0Z_lu" : {
        ".priority" : 1468326341669,
        "message" : "hi",
        "timestamp" : 1468326341669
      },
      "-KMU3_u-x4RAWXw78MHe" : {
        ".priority" : 1468326371206,
        "message" : "yes",
        "timestamp" : 1468326371206
      },
}      

我想显示这些消息

12 July, 2016
    Hi
    Yes
    ....

13 July, 2016
    Hi
    Yes
    ....

我的代码:

var temp_array = new Array();
var m_array = new Array();
chat.messageRef.child(roomId).on('child_added', function(snapshot,prevChildKey) { 
    var msg    = snapshot.val();
    var d      = new Date(msg.timestamp);
    var month  = d.getDate() +' '+chat.monthNames[d.getMonth()] + ", " + d.getFullYear();
    m_array.push(msg);
    temp_array[month] = m_array;
});    
console.log(temp_array); 

【问题讨论】:

    标签: jquery firebase firebase-realtime-database


    【解决方案1】:

    您的问题存在一些问题。我将专注于按日期对项目进行分组。

    ref.on('child_added', function(snapshot) {
      var msg    = snapshot.val();
      var date = new Date(msg.timestamp);
      var id = 'date_'+ date.toISOString().substring(0,10); // e.g. 'day_2016-07-13'
      // get or create the li for this date from the DOM
      var li = document.getElementById(id);
      if (!li) {
        li = document.createElement('li');
        li.id = id;
        li.innerHTML = '<b>' + date.toDateString() + '</b><br>';
        ul.appendChild(li);
      }
      li.innerHTML = li.innerHTML + msg.message + '<br>';
    });
    

    对于我们收到的每个孩子,我们从快照中获取日期并将其转换为所谓的ISO String。其中的前 10 个字符是日期,例如'2016 年 7 月 13 日'。这是日期的一个很好的唯一标识符,因此我们使用它在 HTML 中查找/创建 li 元素。

    一旦我们找到或创建了li 元素,我们就可以安全地将消息添加到其中。最后一行就是这样做的。

    jsbin 中的工作示例:http://jsbin.com/lexaciy/edit?html,js,output

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-02-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-07-04
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多