title: How to group JSON data in javascript?
body: <p>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:</p>
  
  <pre><code>        "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"},
  </code></pre>
  
  <p>And here is code that I use to display data on the screen:</p>
  
  <pre><code>function buildTable(){
      var tbl = "&lt;form id='test' method='POST'&gt;&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Date&lt;/th&gt;&lt;th&gt;Time Slots&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;";
      tbl += "&lt;tbody class='mySlots'&gt;";
  
      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 += "&lt;tr&gt;&lt;td&gt;"+dates+"&lt;/td&gt;";
          tbl += "&lt;td&gt;"+jsData[key].Slot_Label+"&lt;/td&gt;&lt;/tr&gt;";
      }
      tbl += "&lt;/tbody&gt;&lt;/table&gt;&lt;/form&gt;";
      $j('#buildTable').html(tbl);
  }
  </code></pre>
  
  <p>Code above gave me this output on the screen:</p>
  
  <pre><code> 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
  </code></pre>
  
  <p>As you can see first thing is that my data is not in order, so I was wondering if I can use that <code>display</code> 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:</p>
  
  <pre><code>  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
  </code></pre>
  
  <p>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.</p>