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:

<pre>
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
</pre>

    $().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);
            }
          });
        });
      }
    });