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

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

  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)获取密钥并使用custom sort function对其进行排序，并循环排序数组以按顺序打印它们。您也可以稍后对时间段执行相同的操作。

编辑：

考虑到问题已更新：

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

您可以找到有用的日期排序信息here。

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

如何在javascript中分组JSON数据？

1 个答案: