如何在javascript中分组JSON数据？

Question

我正在开发一个检索我的JSON数据的项目,我希望得到我的表Group By Date.我当前的代码构建了表格,我在那里获取每一行的日期.如何为多行获取一个日期值？这是我的JSON数据:

        "14":{"eventDate":"04/21/2016","Slot_Label":"7:00  AM - 7:15  AM","display":"1"},

        "1":{"eventDate":"04/21/2016","Slot_Label":"7:15  AM - 7:30  AM","display":"2"},

        "13":{"eventDate":"04/21/2016","Slot_Label":"7:30  AM - 7:45  AM","display":"3"},

        "12":{"eventDate":"04/21/2016","Slot_Label":"7:45  AM - 8:00  AM","display":"4"},

        "17":{"eventDate":"04/21/2016","Slot_Label":"8:00  AM - 8:15  AM","display":"5"},

        "18":{"eventDate":"04/21/2016","Slot_Label":"8:15  AM - 8:30  AM","display":"6"},

        "15":{"eventDate":"04/21/2016","Slot_Label":"8:30  AM - 8:45  AM","display":"7"},

        "16":{"eventDate":"04/21/2016","Slot_Label":"9:00  AM - 9:15  AM","display":"9"},

        "4":{"eventDate":"12/12/2016","Slot_Label":"9:00  AM - 9:45  AM","display":"1"},

        "7":{"eventDate":"12/12/2016","Slot_Label":"9:45  AM - 10:30  AM","display":"2"},

        "11":{"eventDate":"12/12/2016","Slot_Label":"10:30  AM - 11:15  AM","display":"3"},

        "8":{"eventDate":"12/12/2016","Slot_Label":"11:15  AM - 12:00  PM","display":"4"},

        "2":{"eventDate":"12/12/2016","Slot_Label":"12:00  PM - 12:45  PM","display":"5"},

        "9":{"eventDate":"12/12/2016","Slot_Label":"12:45  PM - 1:30  PM","display":"6"},

        "5":{"eventDate":"12/12/2016","Slot_Label":"1:30  PM - 2:15  PM","display":"7"},

        "6":{"eventDate":"12/12/2016","Slot_Label":"2:15  PM - 3:00  PM","display":"8"},

        "3":{"eventDate":"12/12/2016","Slot_Label":"3:00  PM - 3:45  PM","display":"9"},

        "10":{"eventDate":"12/12/2016","Slot_Label":"3:45  PM - 4:30  PM","display":"10"},

这是我用来在屏幕上显示数据的代码:

function buildTable(){
    var tbl = "<form id='test' method='POST'><table><thead><tr><th>Date</th><th>Time Slots</th></tr></thead>";
    tbl += "<tbody class='mySlots'>";

    var groupedByDate = {};    

    for( var key in jsData){
        var date = jsData[key].eventDate;
        if(!groupedByDate[date]){
            groupedByDate[date] = [];
        }

        groupedByDate[date].push(jsData[key]);
        var dates = Object.keys(groupedByDate)

        tbl += "<tr><td>"+dates+"</td>";
        tbl += "<td>"+jsData[key].Slot_Label+"</td></tr>";
    }
    tbl += "</tbody></table></form>";
    $j('#buildTable').html(tbl);
}

上面的代码在屏幕上给了我这个输出:

 Date          Time Slots   
04/21/2016  7:00 AM - 7:15 AM
04/21/2016  9:00 AM - 9:15 AM
12/12/2016  3:00 PM - 3:45 PM
04/21/2016  8:30 AM - 8:45 AM
12/12/2016  9:00 AM - 9:45 AM
12/12/2016  1:30 PM - 2:15 PM
12/12/2016  2:15 PM - 3:00 PM
04/21/2016  7:30 AM - 7:45 AM
12/12/2016  9:45 AM - 10:30 AM
12/12/2016  11:15 AM - 12:00 PM
04/21/2016  7:45 AM - 8:00 AM
04/21/2016  8:00 AM - 8:15 AM
12/12/2016  12:45 PM - 1:30 PM
12/12/2016  12:00 PM - 12:45 PM
04/21/2016  8:15 AM - 8:30 AM
04/21/2016  7:15 AM - 7:30 AM
12/12/2016  3:45 PM - 4:30 PM
12/12/2016  10:30 AM - 11:15 AM

正如你所看到的那样,首先是我的数据不正常,所以我想知道我是否可以使用display我的JSON 中的数据值来正确显示屏幕上的数据？接下来我想在屏幕上只显示一次日期值,每个日期,我当前代码显示每个表行的日期.期望的输出应如下所示:

  Date           Time Slots

             7:00 AM - 7:15 AM
             7:15 AM - 7:30 AM
             7:30 AM - 7:45 AM
             7:45 AM - 8:00 AM
04/21/2016   8:00 AM - 8:15 AM
             8:15 AM - 8:30 AM
             8:30 AM - 8:45 AM
             9:00 AM - 9:15 AM

   Date          Time Slots
             9:00 AM - 9:45 AM
             9:45 AM - 10:30 AM
             10:30 AM - 11:15 AM
             11:15 AM - 12:00 PM
12/12/2016   12:00 PM - 12:45 PM
             12:45 PM - 1:30 PM
             1:30 PM - 2:15 PM
             2:15 PM - 3:00 PM
             3:00 PM - 3:45 PM
             3:45 PM - 4:30 PM

如果我的记录可以在单独的表格中输出并按照我应该尝试这样做的日期排序？我在Javascript中找到了一些东西,我必须包含额外的库才能使用Group By下划线,我不想因为其他原因而这样做.有没有办法手动执行此操作？提前感谢您对此问题的任何帮助.

Answer 1

您可以首先创建一个以日期为键的字典,这样您就可以将具有相同日期的所有条目组合在一起.就像是:

var groupedByDate = {};
for (var key in jsData) {
    var date = jsData[key].eventDate;  
    if (!groupedByDate[date]) {
        groupedByDate[date] = [];
    }
    groupedByDate[date].push(jsData[key]);
}

您可以稍后获取密钥var dates = Object.keys(groupedByDate)并使用自定义排序功能对它们进行排序,并循环遍历已排序的数组以按顺序打印它们.您也可以稍后对时间段执行相同的操作.

编辑:

考虑到问题已更新:

function buildTable(){
    var tbl = "<form id='test' method='POST'><table><thead><tr><th>Date</th><th>Time Slots</th></tr></thead>";
    tbl += "<tbody class='mySlots'>";

    var groupedByDate = {};    

    // Building grouped dates object where the keys are dates and the 
    // values are the original objects
    for( var key in jsData){
        var date = jsData[key].eventDate;
        if(!groupedByDate[date]){
            groupedByDate[date] = [];
        }

        groupedByDate[date].push(jsData[key]);
    }

    // Getting unique dates
    var dates = Object.keys(groupedByDate);
    dates.sort(function(a, b) {
        // sort considering these are dates strings
    }

    // Now we have a sorted array with all the unique dates
    for (var i = 0; i < dates.length; i++) {
        // These are the original entries that have this respective date.
        var entries = groupedByDate[dates[i]];
        // print entries
        for (var j = 0; j < entries.length; j++) {
            // Only print the date once
            if (j === 0) {
                 // print date
            }
            // print rest of entry in any way you want
        }
    }

    tbl += "</tbody></table></form>";
    $j('#buildTable').html(tbl);
}

您可以在此处找到有用的日期排序信息.

希望这些评论有助于澄清每个对象的含义.您可以考虑打开控制台和console.log()变量,以便更好地了解每个变量.