I'm trying to build a menu from a SharePoint list but I need to group the main menus and then add links to the appropiate main menus. I have separated the links using the LinkType column if it is a header or a header with a link.

What I need help with is to get the distinct of the Group columns or how to group the groups columns.

My data looks like this:

Title   URL             LinkType        Groups
Test    http://Test     Header Link     Comms
Test2d  http://Test2    Header          Marketing
Test3   http://Test3    Header          Comms
Test4   http://test4    Header          Plans
Test5   http://Test5    Header Link     Marketing

$().SPServices({
  operation: "GetListItems",
  async: false,
  listName: "Menu",
  CAMLViewFields: "<ViewFields></ViewFields>",
  completefunc: function (xData, Status) {
    $(xData.responseXML).find("[nodeName=z:row]").each(function() {
      var title= $(this).attr("ows_Title");
      var groups = $(this).attr("ows_Groups");
      var LinkType = $(this).attr("ows_LinkType");
      var HTMLmarkup = '';
      $(".sf-menu").each(function() {
        if (LinkType == 'Header') {
          HTMLmarkup += '<li class="current"><a href=#>' + groups + '</a>';
          HTMLmarkup += '<ul>';
          HTMLmarkup += '<li><a href="#">' + title+ '</a></li>';
          HTMLmarkup += '</ul>'
          HTMLmarkup += '</li>';
          $(".sf-menu").append(HTMLmarkup);
        } else if (LinkType == 'Header Link') {
          //HTMLmarkup += '<li class="current"><a href="#a">' + groups + '</a>';
          HTMLmarkup += '<li class="current"><a href=' + title + '>' + groups + '</a>';
          HTMLmarkup += '<ul>';
          HTMLmarkup += '<li><a href="#">' + title+ '</a></li>';
          HTMLmarkup += '</ul>'
          HTMLmarkup += '</li>';
          $(".sf-menu").append(HTMLmarkup);
        }
      });
    });
  }
});