CODEWITHSUNDEEP
javascriptjqueryjsongroup-by
espresso_coffee
espresso_coffee

Reputation: 6110

How to group JSON data in javascript?

I'm working on a project where my JSON data is retrieved and I would like to get my table Group By Date. My current code builds the table where I'm getting dates for each row. How I can get just one date value for multiple rows? Here is my JSON data:

        "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"},

And here is code that I use to display data on the screen:

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

Code above gave me this output on the screen:

 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

As you can see first thing is that my data is not in order, so I was wondering if I can use that display data values from my JSON to get my data displayed on the screen in right order? Next I would like to display date value only once on the screen for each date, my current code display date for each table row. Desired output should look like this:

  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

If my records can be outputted in separate tables and order by the date where I should try to do this? I found something in Javascript where I have to include extra library to use Group By underscore and I do not want to do this for some other reasons. Is there any way to do this manually? Thanks in advance for any help with this question.

Upvotes: 0

Views: 7853

Answers (1)

kar288
kar288

Reputation: 131

You can start by creating a dictionary with the date as the key, in this way you will be able to group all entries with the same date together. Something like:

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

You can later get the keys with var dates = Object.keys(groupedByDate) and sort them with a custom sort function and loop through the sorted array to print them in order. You can do the same with the time slots later too.

Edit:

Considering that the question was updated:

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

You can find useful date sorting info here.

Hopefully the comments help clarify a bit what each object is. You might consider opening up the console and console.log() the variables to gain a better understanding of what each of them are.

Upvotes: 9

Related Questions